{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bb7ea9f194fdfe9851788754d40add8ad0fa00c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.0-0.tgz","fileCount":27,"integrity":"sha512-s48uQdhSVK/GzZrg3KJW3S1ZMk2kPcSbdVMOzCXZjPqWyG+wNDW6CJEa7EPYiHnjGJjw2GuCyyCSM1dX9J4VcA==","signatures":[{"sig":"MEYCIQCOGwnhetwL+YJTi/QKS/1uXbNjL14UCHd+s9TtPdSFzQIhAI1a9RP0961gHu0XC7dERWysbyJJm/zao9Ap4GBd5Q0V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":282086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRpCRA9TVsSAnZWagAAsX0QAJ2Ud4e68MI4roI4arP4\n7NLDZbqMCdt2+XR105cklKj/KmRl4ZRQkR6V9KM0TbZsPfuYliVJa+B3DEGi\nAYfOjikLA7HsXYbg9/M1+xKiXRMrqK/qJxRH2qdtSl7qKVLJnyAGxZ+Y16ig\n2iaA8fSijK7pkd6ABqGHJl538vC51+a2SRoWkd5Vma2HOckN4vCIObrKDwJS\n1xtCb9qg4VrTAryeA+cCuRnl9W9ZGTV5Ntk7ShYXHdXdErFVoARH+hDohShT\nXxPlTGeB25UF0zc2f7au84UDL03wPePp/fgn6q+Bfm2TA1S1yYE79sLI2kfQ\nTKkFlCRaWWiJwl+SHRZGHg2NQGLmJ+k/IZlGkbxhUkgiONXcpBR9FxDjE81A\nFF8CUbGzZ7QziPioQ4D9R01r6SFdMLoWRxj+FL4+JgV/gBY5/3oji/hvJQuc\nFSIjZogdlzQSgehG7OhV22NafIODF5drO9MYMhMhM1E6kGvQfcixQgOCLVhz\n6scAt9T6mbFOXLpZyWkpnuO4Ri1Fx3Ett/lDR4qJ0DUPmxmiAHRFHjr5HYvN\nXqKjFntbHCj9t5rWjX0k0igLwXJEKLb6FTBqqrEflFQ1pBFCPTqawy6OdIUx\n0Ld3b3XzKvYDPPMkfPP3zRck1G6GEL8T7mpN9fFAeS8HW2x0d4zVWgm3lbx8\nxOvr\r\n=f5nk\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":"acdvorak","email":"acdvorak@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.8.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.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/typography":"^1.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.0-0_1551311977050_0.7547653986655485","host":"s3://npm-registry-packages"},"_id":"@material/form-field@1.0.0-0","version":"1.0.0-0"}