UNPKG

28 kBMarkdownView Raw
1<!--docs:
2title: "Text field"
3layout: detail
4section: components
5excerpt: "MDC Web text field"
6iconId: text_field
7path: /catalog/input-controls/text-field/
8-->
9
10# Text field
11
12[Text fields](https://material.io/components/text-fields) let users enter and edit text.
13
14For more information, see the [API](#api) documentation.
15
16The text field class consists of the following types:
17
18* [Filled text](#filled-text)
19* [Outlined text](#outlined-text)
20
21<img src="images/text-field-generic.png" alt="Text field examples of both filled and outlined types, and each type showing both inactive and focused states.">
22
23## Using text fields
24
25Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
26
27### Installation
28
29```
30npm install @material/textfield
31```
32
33### Styles
34
35```scss
36@use "@material/floating-label/mdc-floating-label";
37@use "@material/line-ripple/mdc-line-ripple";
38@use "@material/notched-outline/mdc-notched-outline";
39@use "@material/textfield";
40
41@include textfield.core-styles;
42```
43
44### JavaScript instantiation
45
46```js
47import {MDCTextField} from '@material/textfield';
48
49const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
50```
51
52**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**
53
54## Filled text
55
56[Filled text fields](https://material.io/components/text-fields/#filled-text-field) have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.
57
58### Filled text example
59
60```html
61<label class="mdc-text-field mdc-text-field--filled">
62 <span class="mdc-text-field__ripple"></span>
63 <span class="mdc-floating-label" id="my-label-id">Hint text</span>
64 <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
65 <span class="mdc-line-ripple"></span>
66</label>
67```
68
69## Outlined text
70
71[Outlined text fields](https://material.io/components/text-fields/#outlined-text-field) have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.
72
73### Outlined text example
74
75```html
76<label class="mdc-text-field mdc-text-field--outlined">
77 <span class="mdc-notched-outline">
78 <span class="mdc-notched-outline__leading"></span>
79 <span class="mdc-notched-outline__notch">
80 <span class="mdc-floating-label" id="my-label-id">Your Name</span>
81 </span>
82 <span class="mdc-notched-outline__trailing"></span>
83 </span>
84 <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
85</label>
86```
87
88See [here](../mdc-notched-outline/) for more information on using the notched outline sub-component.
89
90**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.**
91
92## Other variations
93
94### Textarea
95
96#### Filled
97
98```html
99<label class="mdc-text-field mdc-text-field--filled mdc-text-field--textarea mdc-text-field--no-label">
100 <span class="mdc-text-field__ripple"></span>
101 <span class="mdc-text-field__resizer">
102 <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
103 </span>
104 <span class="mdc-line-ripple"></span>
105</label>
106```
107
108#### Outlined
109
110```html
111<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
112 <span class="mdc-notched-outline">
113 <span class="mdc-notched-outline__leading"></span>
114 <span class="mdc-notched-outline__trailing"></span>
115 </span>
116 <span class="mdc-text-field__resizer">
117 <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
118 </span>
119</label>
120```
121
122**Note: The `mdc-text-field__resizer` element may be omitted for a non-resizable textarea.**
123
124### Text field without label
125
126A text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field.
127Add class name `mdc-text-field--no-label` and remove the label element from the structure.
128
129#### Filled
130
131```html
132<label class="mdc-text-field mdc-text-field--filled mdc-text-field--no-label">
133 <span class="mdc-text-field__ripple"></span>
134 <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
135 <span class="mdc-line-ripple"></span>
136</label>
137```
138
139#### Outlined
140
141```html
142<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
143 <span class="mdc-notched-outline">
144 <span class="mdc-notched-outline__leading"></span>
145 <span class="mdc-notched-outline__trailing"></span>
146 </span>
147 <input class="mdc-text-field__input" type="text" aria-label="Label">
148</label>
149```
150
151#### Textarea
152
153```html
154<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
155 <span class="mdc-notched-outline">
156 <span class="mdc-notched-outline__leading"></span>
157 <span class="mdc-notched-outline__trailing"></span>
158 </span>
159 <span class="mdc-text-field__resizer">
160 <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
161 </span>
162</label>
163```
164
165### Disabled text field
166
167To disable the text field, add the `disabled` attribute to the `<input>` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element.
168
169```html
170<label class="mdc-text-field mdc-text-field--filled mdc-text-field--disabled">
171 <span class="mdc-text-field__ripple"></span>
172 <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
173 <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
174 <span class="mdc-line-ripple"></span>
175</label>
176```
177
178### Text field with helper text
179
180The helper text provides supplemental information and/or validation messages to users. It appears on input field focus
181and disappears on input field blur by default, or it can be persistent. Helper text should be rendered inside `.mdc-text-field-helper-line` element
182which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for more information on using helper text.
183
184```html
185<label class="mdc-text-field mdc-text-field--filled">
186 <span class="mdc-text-field__ripple"></span>
187 <span class="mdc-floating-label" id="my-label-id">My Label</span>
188 <input class="mdc-text-field__input" type="text"
189 aria-labelledby="my-label-id"
190 aria-controls="my-helper-id"
191 aria-describedby="my-helper-id">
192 <span class="mdc-line-ripple"></span>
193</label>
194<div class="mdc-text-field-helper-line">
195 <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
196</div>
197```
198
199### Text field with character counter
200
201Character counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.
202Character counter should be rendered inside `.mdc-text-field-helper-line` element which is immediate sibling of `.mdc-text-field`.
203See [here](character-counter/) for more information on using character counter.
204
205```html
206<label class="mdc-text-field mdc-text-field--filled">
207 <span class="mdc-text-field__ripple"></span>
208 <span class="mdc-floating-label" id="my-label-id">My Label</span>
209 <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
210 <span class="mdc-line-ripple"></span>
211</label>
212<div class="mdc-text-field-helper-line">
213 <div class="mdc-text-field-character-counter">0 / 10</div>
214</div>
215```
216
217### Multi-line text field (textarea) with character counter
218
219A character counter can be associated with a textarea by including it in the
220helper line. In this case, the counter will appear below the textarea, adjacent
221to any helper text.
222
223```html
224<label class="mdc-text-field mdc-text-field--textarea">
225 <span class="mdc-notched-outline">
226 <span class="mdc-notched-outline__leading"></span>
227 <span class="mdc-notched-outline__notch">
228 <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
229 </span>
230 <span class="mdc-notched-outline__trailing"></span>
231 </span>
232 <span class="mdc-text-field__resizer">
233 <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8"
234 cols="40" maxlength="140"></textarea>
235 </span>
236</label>
237<div class="mdc-text-field-helper-line">
238 <div class="mdc-text-field-character-counter">0 / 140</div>
239</div>
240```
241Alternatively, the character counter can be placed in the textarea's body by
242inserting the character counter below the textarea and adding the
243`mdc-text-field--with-internal-counter` modifier class to the text field.
244
245```html
246<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--with-internal-counter">
247 <span class="mdc-notched-outline">
248 <span class="mdc-notched-outline__leading"></span>
249 <span class="mdc-notched-outline__notch">
250 <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
251 </span>
252 <span class="mdc-notched-outline__trailing"></span>
253 </span>
254 <span class="mdc-text-field__resizer">
255 <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
256 <span class="mdc-text-field-character-counter">0 / 140</span>
257 </span>
258</label>
259```
260
261Helper text and Character counter are optional subcomponents of text field that can co-exist independently.
262It is recommended that `.mdc-text-field` and `.mdc-text-field-helper-line` elements have same width for correct layout.
263
264### Text field with prefix and suffix text
265
266Prefix and suffix text can add context to a text field, such as a currency symbol prefix or a unit of mass suffix.
267A prefix, suffix, or both can be added within the default or outlined variants of text fields.
268
269```html
270<label class="mdc-text-field mdc-text-field--filled">
271 <span class="mdc-text-field__ripple"></span>
272 <span class="mdc-floating-label" id="my-label-id">Currency Value</span>
273 <span class="mdc-text-field__affix mdc-text-field__affix--prefix">$</span>
274 <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
275 <span class="mdc-text-field__affix mdc-text-field__affix--suffix">.00</span>
276 <span class="mdc-line-ripple"></span>
277</label>
278```
279
280**Note: Do not use `mdc-text-field--affix` within `mdc-text-field--textarea`.**
281
282### Text field with leading and trailing icons
283
284Leading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as
285well as interaction targets. See [here](icon/) for more information on using icons.
286
287## Other features
288
289### HTML5 validation
290
291`MDCTextFieldFoundation` provides validity styling by using the `:invalid` and `:required` attributes provided
292by HTML5's form validation API.
293
294```html
295<label class="mdc-text-field mdc-text-field--filled">
296 <span class="mdc-text-field__ripple"></span>
297 <span class="mdc-floating-label" id="my-label-id">Password</span>
298 <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
299 <span class="mdc-line-ripple"></span>
300</label>
301```
302
303`MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set.
304
305### Pre-filled
306
307When dealing with JS-driven text fields that already have values, you'll want to ensure that you
308render `mdc-text-field` with the `mdc-text-field--label-floating` modifier class, as well as
309`mdc-floating-label` with the `mdc-floating-label--float-above` modifier class. This will
310ensure that the label moves out of the way of the text field's value and prevents a Flash Of
311Un-styled Content (**FOUC**).
312
313```html
314<label class="mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
315 <span class="mdc-text-field__ripple"></span>
316 <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
317 Label in correct place
318 </span>
319 <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
320 <span class="mdc-line-ripple"></span>
321</label>
322```
323
324### Baseline alignment
325
326By default, text fields will be aligned with other elements relative to their
327baseline. The input text's baseline is used to determine where a text field
328should be aligned to and is different between variants. To force alignment to
329the text field's container instead of its baseline, align the element using
330flexbox.
331
332```html
333<div>
334 <label class="mdc-text-field mdc-text-field--outlined">
335 <span class="mdc-notched-outline">
336 <span class="mdc-notched-outline__leading"></span>
337 <span class="mdc-notched-outline__trailing"></span>
338 </span>
339 <input type="text" class="mdc-text-field__input" value="Baseline">
340 </label>
341 <span>Text that is aligned with the text field's value</span>
342</div>
343
344<div style="display: flex; flex-direction: row; align-items: flex-end;">
345 <label class="mdc-text-field mdc-text-field--outlined">
346 <span class="mdc-notched-outline">
347 <span class="mdc-notched-outline__leading"></span>
348 <span class="mdc-notched-outline__trailing"></span>
349 </span>
350 <input type="text" class="mdc-text-field__input" value="Baseline">
351 </label>
352 <span>Text that is aligned to the bottom of the text field's outline</span>
353</div>
354```
355
356## API
357
358### CSS classes
359
360CSS Class | Description
361--- | ---
362`mdc-text-field` | Mandatory.
363`mdc-text-field--filled` | Styles the text field as a filled text field.
364`mdc-text-field--outlined` | Styles the text field as an outlined text field.
365`mdc-text-field--textarea` | Indicates the text field is a `<textarea>`.
366`mdc-text-field--disabled` | Styles the text field as a disabled text field.
367`mdc-text-field--with-leading-icon` | Styles the text field as a text field with a leading icon.
368`mdc-text-field--with-trailing-icon` | Styles the text field as a text field with a trailing icon.
369`mdc-text-field--focused` | Styles the text field as a text field in focus.
370`mdc-text-field--no-label` | Styles the text field that has no label.
371`mdc-text-field--end-aligned` | Styles the text field with an end-aligned input.
372`mdc-text-field--label-floating` | Styles the text field with a floating label and pre-filled or focused value.
373`mdc-text-field--ltr-text` | Styles the text field's text elements (input, prefix, and suffix) as LTR even when the direction is RTL. Useful for RTL languages that use LTR for fractional notations.
374`mdc-text-field--with-internal-counter` | Styles the text area as a text area with an internal character counter.
375`mdc-text-field-helper-line` | Styles the container of helper text and character counter elements.
376
377### Sass mixins
378
379To customize the colors of any part of the text-field, use the following mixins. We recommend you apply
380these mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--focused)` to select your unfocused text fields,
381and `.foo-text-field.mdc-text-field--focused` to select your focused text-fields. To change the invalid state of your text fields,
382apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--invalid`.
383
384> _NOTE_: the `mdc-line-ripple-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-text-field--focused)`).
385
386#### Mixins for all text fields
387
388Mixin | Description
389--- | ---
390`ink-color($color)` | Customizes the color of the text entered into an enabled text field.
391`placeholder-color($color)` | Customizes the color of the placeholder in an enabled text field.
392`disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.
393`disabled-placeholder-color($color)` | Customizes the color of the placeholder in a disabled text field.
394`label-color($color)` | Customizes the text color of the label in an enabled text field.
395`disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.
396`caret-color($color)` | Customizes the color of the cursor caret of the text field.
397`prefix-color($color)` | Customizes the color of the prefix text of an enabled text field.
398`disabled-prefix-color($color)` | Customizes the color of the prefix text of a disabled text field.
399`suffix-color($color)` | Customizes the color of the suffix text of an enabled text field.
400`disabled-suffix-color($color)` | Customizes the color of the suffix text of a disabled text field.
401`floating-label-float-transition($duration-ms, $timing-function)` | Customizes the duration and optional timing function for the floating label's "float" transition.
402
403#### Mixins for filled text field and textarea
404
405Mixin | Description
406--- | ---
407`fill-color($color)` | Customizes the background color of the text field or textarea when enabled.
408`disabled-fill-color($color)` | Customizes the background color of the text field or textarea when disabled.
409
410#### Mixins for filled text field only
411
412Mixin | Description
413--- | ---
414`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
415`bottom-line-color($color)` | Customizes the text field bottom line color.
416`hover-bottom-line-color($color)` | Customizes the hover text field bottom line color.
417`disabled-bottom-line-color($color)` | Customizes the disabled text field bottom line color.
418`line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
419`density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
420`height($height)` | Sets height of default text field variant.
421
422#### Mixins for outlined text field and textarea
423
424Mixin | Description
425--- | ---
426`focused-outline-color($color)` | Customizes the outline border color when the text field or textarea is focused.
427`hover-outline-color($color)` | Customizes the outline border color when the text field or textarea is hovered.
428`disabled-outline-color($color)` | Customizes the outline border color when the text field or textarea is disabled.
429`outline-color($color)` | Customizes the border color of the outlined text field or textarea.
430
431#### Mixins for outlined text field only
432
433Mixin | Description
434--- | ---
435`outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
436`outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
437`outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).
438`outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
439`outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.
440
441#### Mixins for textarea only
442
443Mixin | Description
444--- | ---
445`textarea-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to text area variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
446`outlined-textarea-density($density-scale)` | Sets density scale for outlined textarea. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
447`textarea-min-rows($rows)` | Sets the minimum number of rows for a textarea a textarea may be resized to.
448
449## `MDCTextField` properties and methods
450
451Property | Value Type | Description
452--- | --- | ---
453`value` | `string` | Proxies to the foundation's `getValue`/`setValue` methods.
454`disabled` | `boolean` | Proxies to the foundation's `isDisabled`/`setDisabled` methods.
455`useNativeValidation` | `boolean` (write-only) | Proxies to the foundation's `setUseNativeValidation` method.
456`valid` | `boolean` | Proxies to the foundation's `isValid`/`setValid` methods.
457`helperTextContent` | `string` (write-only)| Proxies to the foundation's `setHelperTextContent` method when set.
458`ripple` | `MDCRipple` (write-only) | The `MDCRipple` instance for the root element that `MDCTextField` initializes; this only applies to the default Text Field, and is `null` for other variants.
459`leadingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setLeadingIconAriaLabel` method.
460`trailingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setTrailingIconAriaLabel` method.
461`leadingIconContent` | `string` (write-only) | Proxies to the foundation's `setLeadingIconContent` method.
462`trailingIconContent` | `string` (write-only) | Proxies to the foundation's `setTrailingIconContent` method.
463`prefixText` | `string` | Gets or sets the text content of the prefix, if it exists.
464`suffixText` | `string` | Gets or sets the text content of the suffix, if it exists.
465
466In addition to the above, the following properties proxy to the `input` element's properties of the same name:
467
468* `required`
469* `pattern`
470* `minLength`
471* `maxLength`
472* `min`
473* `max`
474* `step`
475
476Method Signature | Description
477--- | ---
478`focus() => void` | Focuses the `input` or `textarea` element.
479`layout() => void` | Adjusts the dimensions and positions for all sub-elements.
480
481## Usage within frameworks
482
483If you are using a JavaScript framework, such as React or Angular, you can create a Text 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).
484
485### `MDCTextFieldAdapter`
486
487Method Signature | Description
488--- | ---
489`addClass(className: string) => void` | Adds a class to the root element.
490`removeClass(className: string) => void` | Removes a class from the root element.
491`hasClass(className: string) => boolean` | Returns true if the root element contains the given class name.
492`registerTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event.
493`deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event.
494`registerInputInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native input element for a given event.
495`deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native input element for a given event.
496`registerValidationAttributeChangeHandler(handler: (attributeNames: string[]) => void) => MutationObserver` | Registers a validation attribute change listener on the input element. Handler accepts list of attribute changes.
497`deregisterValidationAttributeChangeHandler(!MutationObserver) => void` | Disconnects a validation attribute observer on the input element.
498`getNativeInput() => NativeInputType \| null` | Returns an object representing the native text input element, with a similar API shape. See [types.ts](types.ts).
499`isFocused() => boolean` | Returns whether the input is focused.
500`shakeLabel(shouldShake: boolean) => void` | Shakes the label to indicate an invalid input value.
501`floatLabel(shouldFloat: boolean) => void` | Floats the label.
502`hasLabel() => boolean` | Determines whether the text field has a label element.
503`getLabelWidth() => number` | Returns the width of the label element in px.
504`activateLineRipple() => void` | Activates the text field's line ripple sub-element.
505`deactivateLineRipple() => void` | Deactivate the text field's line ripple sub-element.
506`setLineRippleTransformOrigin(normalizedX: number) => void` | Sets the CSS `transform-origin` property to the given value on the text field's line ripple sub-element (if present).
507`hasOutline() => boolean` | Determines whether the text field has an outline sub-element.
508`notchOutline(labelWidth: number) => void` | Sets the width of the text field's notched outline sub-element.
509`closeOutline() => void` | Closes the text field's notched outline sub-element.
510
511#### `MDCTextFieldAdapter.getNativeInput()`
512
513Returns an object representing the native text input element, with a similar API shape. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully.
514
515#### `MDCTextFieldAdapter.getIdleOutlineStyleValue(propertyName: string)`
516
517Returns the idle outline element's computed style value of the given css property `propertyName`. The vanilla implementation achieves this via `getComputedStyle(...).getPropertyValue(propertyName)`.
518
519### `MDCTextFieldFoundation`
520
521Property | Value Type | Description
522--- | --- | ---
523`shouldFloat` | `boolean` (read-only) | Determines whether the label should float.
524`shouldShake` | `boolean` (read-only) | Determines whether the label should shake.
525
526Method Signature | Description
527--- | ---
528`getValue() => string` | Returns the input's value.
529`setValue(value: string)` | Sets the input's value.
530`setUseNativeValidation(useNativeValidation: boolean)` | Sets whether to check native HTML validity state (`true`, default) or custom validity state when updating styles (`false`).
531`setValid(isValid: boolean)` | Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless `setUseNativeValidation(false)` is also called.
532`isValid() => boolean` | Returns the component's current validity state (either native or custom, depending on how `setUseNativeValidation()` was configured).
533`isDisabled() => boolean` | Returns whether or not the input is disabled.
534`setDisabled(disabled: boolean) => void` | Updates the input's disabled state.
535`handleTextFieldInteraction(evt: Event) => void` | Handles click and keydown events originating from inside the Text Field component.
536`handleInput() => void` | Handles text input and textarea input event.
537`handleValidationAttributeChange(attributesList: !Array<string>) => void` | Handles validation attribute changes.
538`activateFocus() => void` | Activates the focus state of the Text Field. Normally called in response to the input focus event.
539`deactivateFocus() => void` | Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
540`setHelperTextContent(content: string) => void` | Sets the content of the helper text.
541`setLeadingIconAriaLabel(label: string) => void` | Sets the aria label of the leading icon.
542`setLeadingIconContent(content: string) => void` | Sets the text content of the leading icon.
543`setTrailingIconAriaLabel(label: string) => void` | Sets the aria label of the trailing icon.
544`setTrailingIconContent(content: string) => void` | Sets the text content of the trailing icon.
545`notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline.
546`setTransformOrigin(evt: TouchEvent \| MouseEvent) => void` | Sets the line ripple's transform origin, so that the line ripple activate animation will animate out from the user's click location.
547`autoCompleteFocus() => void` | Activates the Text Field's focus state in cases when the input value is changed programmatically (i.e., without user action).
548`setAutovalidate(shouldAutovalidate: boolean) => void` | Sets whether or not the textfield should validate its input when `value` changes.
549`getAutovalidate() => boolean` | Whether or not the textfield should validate its input when `value` changes. `true` by default.
550
551`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.