{"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","name":"@material/radio","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Radio Buttons\"\nlayout: detail\nsection: components\niconId: radio_button\npath: /catalog/input-controls/radio-buttons/\n-->\n\n# Radio Buttons\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/radios.png\" width=\"60\" alt=\"Radio buttons screenshot\">\n  </a>\n</div>-->\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-radio-buttons\">Material Design guidelines: Selection Controls – Radio buttons</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-radio\">\n    <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" checked>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n  </div>\n  <label for=\"radio-1\">Radio 1</label>\n</div>\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 `<input>` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-radio mdc-radio--disabled\">\n    <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" disabled>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n  </div>\n  <label for=\"radio-1\">Radio 1</label>\n</div>\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","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","radio"],"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":{},"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"}],"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"},"_id":"@material/radio@4.0.0-alpha.0","version":"4.0.0-alpha.0"}