\n\n## Installation\n\n```\nnpm install @material/textfield\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n \n \n \n
\n```\n\n> NOTE: For more details, see [MDC Line Ripple](../mdc-line-ripple/README.md)\n> and [MDC Floating Label](../mdc-floating-label/README.md).\n\n### Styles\n\n```scss\n@import \"@material/textfield/mdc-text-field\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTextField} from '@material/textfield';\n\nconst textField = new MDCTextField(document.querySelector('.mdc-text-field'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Full Width\n\nFull width text fields are useful for in-depth tasks or entering complex information.\n\n```html\n
\n \n
\n```\n\n> _NOTE_: Do not use `mdc-text-field--outlined` to style a full width text field.\n\n> _NOTE_: Do not use `mdc-floating-label` within `mdc-text-field--fullwidth`. Labels should not be\nincluded as part of the DOM structure of a full width text field.\n\n### Textarea\n\n```html\n
\n \n
\n \n
\n \n
\n \n
\n
\n```\n\n### Outlined\n\n```html\n
\n \n
\n \n
\n \n
\n \n
\n
\n```\n\nSee [here](../mdc-notched-outline/) for more information on using the notched outline sub-component.\n\n> _NOTE_: Do not use `mdc-line-ripple` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Line Ripple should not be included as part of the DOM structure of an outlined text field.\n\n### Disabled\n\nTo disable the text field, add the `disabled` attribute to the `` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element.\n\n```html\n
\n \n \n \n
\n```\n\n### Text Field without label\n\nA text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field.\nAdd class name `mdc-text-field--no-label` and remove the label element from the structure.\n\n#### Filled\n\n```html\n
\n \n \n
\n```\n\n#### Outlined\n\n```html\n
\n \n
\n \n \n
\n
\n```\n\n#### Textarea\n\n```html\n
\n \n
\n \n \n
\n
\n```\n\n### Text Field with Helper Text\n\nThe helper text provides supplemental information and/or validation messages to users. It appears on input field focus\nand disappears on input field blur by default, or it can be persistent. Helper text should be rendered inside `.mdc-text-field-helper-line` element\nwhich is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for more information on using helper text.\n\n```html\n
\n \n \n \n
\n
\n
helper text
\n
\n```\n\n### Text Field with Character Counter\n\nCharacter counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.\nCharacter counter should be rendered inside `.mdc-text-field-helper-line` element which is immediate sibling of `.mdc-text-field`.\nSee [here](character-counter/) for more information on using character counter.\n\n```html\n
\n \n \n \n
\n
\n
0 / 10
\n
\n```\n\n### Multi-line Text Field (Textarea) with Character Counter\n\nThe layout structure of character counter for multi-line text field (textarea) is slightly different since it is rendered\ninside of text field component.\n\n```html\n
\n
0 / 140
\n \n
\n \n
\n \n
\n \n
\n
\n```\n\nHelper text and Character counter are optional subcomponents of text field that can co-exist independently.\nIt is recommended that `.mdc-text-field` and `.mdc-text-field-helper-line` elements have same width for correct layout.\n\n### Text Field with Leading and Trailing Icons\n\nLeading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as\nwell as interaction targets. See [here](icon/) for more information on using icons.\n\n### HTML5 Validation\n\n`MDCTextFieldFoundation` provides validity styling by using the `:invalid` and `:required` attributes provided\nby HTML5's form validation API.\n\n```html\n
\n \n \n \n
\n```\n\n`MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set.\n\n### Pre-filled\n\nWhen dealing with JS-driven text fields that already have values, you'll want to ensure that you\nrender `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class. This will\nensure that the label moves out of the way of the text field's value and prevents a Flash Of\nUn-styled Content (**FOUC**).\n\n```html\n
\n \n \n \n
\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-text-field` | Mandatory.\n`mdc-text-field--outlined` | Styles the text field as an outlined text field.\n`mdc-text-field--fullwidth` | Styles the text field as a full width text field.\n`mdc-text-field--textarea` | Indicates the text field is a `