{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe132371f21ee6d74335b894dd70ef2514accbc8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.0-1.tgz","fileCount":27,"integrity":"sha512-+KHyW/K8eTppqKh8osJlJkIDHQVqp364tDPyCaSN9SlI9M3afcUUcjIJOTsGcs3H7chhppxEuDDs62h+cTEnWw==","signatures":[{"sig":"MEYCIQDnNhhpqGK7/75kokyP8+eKKnnhLpz0Qe6982HNk70/KQIhAIN2lRd3v2aWHYvsYg1gxPBjdHMHhcLQPu4pv9UTc38Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":282140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXLCRA9TVsSAnZWagAAeeYP/RWJyi/AZEXrjB3I0F0U\njTYdTN65wvPwFTkCuXTWiI2rZGUs6HSORJYVmbNFxEvGG8xCB4vVEMarW5Lo\nZkuWzqNeWj/RtZ9yR4tMQiDovFMynxrspWvCm8vvN93mwZXhTPGCnHx6mlWW\nzUceUsHFdXpeYpieQKYilB7DVH0/g9Nhxq+bmZIXtn2tdRe3T3sq36H5Y9FD\nouDfojAlisEPeD+whqnaPth+eO+HHv5gotLtAYP2UV3OcOmlvQXMuic2dCDR\n9MXaM3iv//5RnK972p9j7y+1+cnnYpsEz8V8fOxuhtaS7BEvMjODCI1BqSMA\nT7vc2kYH/Zd9ZPPmTK56furZrklmRc/nG3ZoQ+r3f81bGKgXR8NsSFGU5xqj\nGdNrG43hlDM9RBVdC3Wci8dcppHzNQAVdJNGilrLKp8Ic0XT8G0phNV0GHft\nGfOemGWqE1GAXk32+vna1EJ++Kt3XME+Kv59B7RbPnrJLhJMGk/HvFMGShoQ\nzUd0IrwrMX6Qeffg1LgXpQRZSdYELcfpBYpAmTgiGOSG8YqDSgqxyqH8G+kK\nQ+4EwvRISKJhq/c+SIrz7DO+S4jhmTBQcjsJLdSlbu9LUqgQZtFJyMmRGDib\nRQS4OS9CdZ8j4ZZdSTNRvnqdw/Fc0TPornC5lHqqU3VvLUckq/PwS/IanpR/\nP1nI\r\n=Jb7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","name":"@material/form-field","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\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 with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","license":"MIT","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","form"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","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":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/typography":"^1.0.0-1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.0-1_1551742411128_0.30303101169572577","host":"s3://npm-registry-packages"},"_id":"@material/form-field@1.0.0-1","version":"1.0.0-1"}