@material/textfield

  • Version 13.0.0
  • Published
  • 1.51 MB
  • 14 dependencies
  • MIT license

Install

npm i @material/textfield
yarn add @material/textfield
pnpm add @material/textfield

Overview

The Material Components for the web text field component

Index

Variables

Classes

Interfaces

Type Aliases

Variables

variable ALWAYS_FLOAT_TYPES

const ALWAYS_FLOAT_TYPES: string[];
  • Label should always float for these types as they show some UI even if value is empty.

variable characterCountCssClasses

const characterCountCssClasses: { ROOT: string };
  • Copyright 2019 Google Inc.

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable characterCountStrings

const characterCountStrings: { ROOT_SELECTOR: string };

    variable cssClasses

    const cssClasses: {
    DISABLED: string;
    FOCUSED: string;
    HELPER_LINE: string;
    INVALID: string;
    LABEL_FLOATING: string;
    NO_LABEL: string;
    OUTLINED: string;
    ROOT: string;
    TEXTAREA: string;
    WITH_LEADING_ICON: string;
    WITH_TRAILING_ICON: string;
    WITH_INTERNAL_COUNTER: string;
    };

      variable helperTextCssClasses

      const helperTextCssClasses: {
      HELPER_TEXT_PERSISTENT: string;
      HELPER_TEXT_VALIDATION_MSG: string;
      ROOT: string;
      };
      • Copyright 2016 Google Inc.

        Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

        The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

      variable helperTextStrings

      const helperTextStrings: {
      ARIA_HIDDEN: string;
      ROLE: string;
      ROOT_SELECTOR: string;
      };

        variable iconCssClasses

        const iconCssClasses: { ROOT: string };

          variable iconStrings

          const iconStrings: { ICON_EVENT: string; ICON_ROLE: string };
          • Copyright 2016 Google Inc.

            Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

            The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

          variable numbers

          const numbers: { LABEL_SCALE: number };

            variable strings

            const strings: {
            ARIA_CONTROLS: string;
            ARIA_DESCRIBEDBY: string;
            INPUT_SELECTOR: string;
            LABEL_SELECTOR: string;
            LEADING_ICON_SELECTOR: string;
            LINE_RIPPLE_SELECTOR: string;
            OUTLINE_SELECTOR: string;
            PREFIX_SELECTOR: string;
            SUFFIX_SELECTOR: string;
            TRAILING_ICON_SELECTOR: string;
            };
            • Copyright 2016 Google Inc.

              Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

              The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

              THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

            variable VALIDATION_ATTR_WHITELIST

            const VALIDATION_ATTR_WHITELIST: string[];
            • Whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation under the "Validation-related attributes" section.

            Classes

            class MDCTextField

            class MDCTextField
            extends MDCComponent<MDCTextFieldFoundation>
            implements MDCRippleCapableSurface {}

              property disabled

              disabled: boolean;

                property max

                max: string;

                  property maxLength

                  maxLength: number;

                    property min

                    min: string;

                      property minLength

                      minLength: number;

                        property pattern

                        pattern: string;

                          property prefixText

                          prefixText: string;
                          • Gets the text content of the prefix, or null if it does not exist.

                          property required

                          required: boolean;

                            property ripple

                            ripple: any;

                              property step

                              step: string;

                                property suffixText

                                suffixText: string;
                                • Gets the text content of the suffix, or null if it does not exist.

                                property valid

                                valid: boolean;

                                  property value

                                  value: string;

                                    method attachTo

                                    static attachTo: (root: Element) => MDCTextField;

                                      method destroy

                                      destroy: () => void;

                                        method focus

                                        focus: () => void;
                                        • Focuses the input element.

                                        method getDefaultFoundation

                                        getDefaultFoundation: () => MDCTextFieldFoundation;

                                          method initialize

                                          initialize: (
                                          rippleFactory?: any,
                                          lineRippleFactory?: any,
                                          helperTextFactory?: MDCTextFieldHelperTextFactory,
                                          characterCounterFactory?: MDCTextFieldCharacterCounterFactory,
                                          iconFactory?: MDCTextFieldIconFactory,
                                          labelFactory?: any,
                                          outlineFactory?: any
                                          ) => void;

                                            method initialSyncWithDOM

                                            initialSyncWithDOM: () => void;
                                            • Initializes the Text Field's internal state based on the environment's state.

                                            method layout

                                            layout: () => void;
                                            • Recomputes the outline SVG path for the outline element.

                                            class MDCTextFieldCharacterCounter

                                            class MDCTextFieldCharacterCounter extends MDCComponent<MDCTextFieldCharacterCounterFoundation> {}

                                              property foundationForTextField

                                              readonly foundationForTextField: MDCTextFieldCharacterCounterFoundation;

                                                method attachTo

                                                static attachTo: (root: Element) => MDCTextFieldCharacterCounter;

                                                  method getDefaultFoundation

                                                  getDefaultFoundation: () => MDCTextFieldCharacterCounterFoundation;

                                                    class MDCTextFieldCharacterCounterFoundation

                                                    class MDCTextFieldCharacterCounterFoundation extends MDCFoundation<MDCTextFieldCharacterCounterAdapter> {}

                                                      constructor

                                                      constructor(adapter?: Partial<MDCTextFieldCharacterCounterAdapter>);

                                                        property cssClasses

                                                        static readonly cssClasses: { ROOT: string };

                                                          property defaultAdapter

                                                          static readonly defaultAdapter: MDCTextFieldCharacterCounterAdapter;

                                                          property strings

                                                          static readonly strings: { ROOT_SELECTOR: string };

                                                            method setCounterValue

                                                            setCounterValue: (currentLength: number, maxLength: number) => void;

                                                              class MDCTextFieldFoundation

                                                              class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {}

                                                                constructor

                                                                constructor(
                                                                adapter?: Partial<MDCTextFieldAdapter>,
                                                                foundationMap?: Partial<MDCTextFieldFoundationMap>
                                                                );
                                                                • Parameter adapter

                                                                  Parameter foundationMap

                                                                  Map from subcomponent names to their subfoundations.

                                                                property cssClasses

                                                                static readonly cssClasses: {
                                                                DISABLED: string;
                                                                FOCUSED: string;
                                                                HELPER_LINE: string;
                                                                INVALID: string;
                                                                LABEL_FLOATING: string;
                                                                NO_LABEL: string;
                                                                OUTLINED: string;
                                                                ROOT: string;
                                                                TEXTAREA: string;
                                                                WITH_LEADING_ICON: string;
                                                                WITH_TRAILING_ICON: string;
                                                                WITH_INTERNAL_COUNTER: string;
                                                                };

                                                                  property defaultAdapter

                                                                  static readonly defaultAdapter: MDCTextFieldAdapter;

                                                                  property numbers

                                                                  static readonly numbers: { LABEL_SCALE: number };

                                                                    property shouldFloat

                                                                    readonly shouldFloat: boolean;

                                                                      property shouldShake

                                                                      readonly shouldShake: boolean;

                                                                        property strings

                                                                        static readonly strings: {
                                                                        ARIA_CONTROLS: string;
                                                                        ARIA_DESCRIBEDBY: string;
                                                                        INPUT_SELECTOR: string;
                                                                        LABEL_SELECTOR: string;
                                                                        LEADING_ICON_SELECTOR: string;
                                                                        LINE_RIPPLE_SELECTOR: string;
                                                                        OUTLINE_SELECTOR: string;
                                                                        PREFIX_SELECTOR: string;
                                                                        SUFFIX_SELECTOR: string;
                                                                        TRAILING_ICON_SELECTOR: string;
                                                                        };

                                                                          method activateFocus

                                                                          activateFocus: () => void;
                                                                          • Activates the text field focus state.

                                                                          method autoCompleteFocus

                                                                          autoCompleteFocus: () => void;
                                                                          • Activates the Text Field's focus state in cases when the input value changes without user input (e.g. programmatically).

                                                                          method deactivateFocus

                                                                          deactivateFocus: () => void;
                                                                          • Deactivates the Text Field's focus state.

                                                                          method destroy

                                                                          destroy: () => void;

                                                                            method getValidateOnValueChange

                                                                            getValidateOnValueChange: () => boolean;
                                                                            • Whether or not validity should be updated on value change. true by default.

                                                                            method getValue

                                                                            getValue: () => string;

                                                                              method handleInput

                                                                              handleInput: () => void;
                                                                              • Handles input change of text input and text area.

                                                                              method handleTextFieldInteraction

                                                                              handleTextFieldInteraction: () => void;
                                                                              • Handles user interactions with the Text Field.

                                                                              method handleValidationAttributeChange

                                                                              handleValidationAttributeChange: (attributesList: string[]) => void;
                                                                              • Handles validation attribute changes

                                                                              method init

                                                                              init: () => void;

                                                                                method isDisabled

                                                                                isDisabled: () => boolean;

                                                                                  method isValid

                                                                                  isValid: () => boolean;
                                                                                  • The custom validity state, if set; otherwise, the result of a native validity check.

                                                                                  method notchOutline

                                                                                  notchOutline: (openNotch: boolean) => void;
                                                                                  • Opens/closes the notched outline.

                                                                                  method setDisabled

                                                                                  setDisabled: (disabled: boolean) => void;
                                                                                  • Parameter disabled

                                                                                    Sets the text-field disabled or enabled.

                                                                                  method setHelperTextContent

                                                                                  setHelperTextContent: (content: string) => void;
                                                                                  • Parameter content

                                                                                    Sets the content of the helper text.

                                                                                  method setLeadingIconAriaLabel

                                                                                  setLeadingIconAriaLabel: (label: string) => void;
                                                                                  • Sets the aria label of the leading icon.

                                                                                  method setLeadingIconContent

                                                                                  setLeadingIconContent: (content: string) => void;
                                                                                  • Sets the text content of the leading icon.

                                                                                  method setTrailingIconAriaLabel

                                                                                  setTrailingIconAriaLabel: (label: string) => void;
                                                                                  • Sets the aria label of the trailing icon.

                                                                                  method setTrailingIconContent

                                                                                  setTrailingIconContent: (content: string) => void;
                                                                                  • Sets the text content of the trailing icon.

                                                                                  method setTransformOrigin

                                                                                  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.

                                                                                  method setUseNativeValidation

                                                                                  setUseNativeValidation: (useNativeValidation: boolean) => void;
                                                                                  • Enables or disables the use of native validation. Use this for custom validation.

                                                                                    Parameter useNativeValidation

                                                                                    Set this to false to ignore native input validation.

                                                                                  method setValid

                                                                                  setValid: (isValid: boolean) => void;
                                                                                  • Parameter isValid

                                                                                    Sets the custom validity state of the Text Field.

                                                                                  method setValidateOnValueChange

                                                                                  setValidateOnValueChange: (shouldValidate: boolean) => void;
                                                                                  • Parameter shouldValidate

                                                                                    Whether or not validity should be updated on value change.

                                                                                  method setValue

                                                                                  setValue: (value: string) => void;
                                                                                  • Parameter value

                                                                                    The value to set on the input Element.

                                                                                  class MDCTextFieldHelperText

                                                                                  class MDCTextFieldHelperText extends MDCComponent<MDCTextFieldHelperTextFoundation> {}

                                                                                    property foundationForTextField

                                                                                    readonly foundationForTextField: MDCTextFieldHelperTextFoundation;

                                                                                      method attachTo

                                                                                      static attachTo: (root: Element) => MDCTextFieldHelperText;

                                                                                        method getDefaultFoundation

                                                                                        getDefaultFoundation: () => MDCTextFieldHelperTextFoundation;

                                                                                          class MDCTextFieldHelperTextFoundation

                                                                                          class MDCTextFieldHelperTextFoundation extends MDCFoundation<MDCTextFieldHelperTextAdapter> {}

                                                                                            constructor

                                                                                            constructor(adapter?: Partial<MDCTextFieldHelperTextAdapter>);

                                                                                              property cssClasses

                                                                                              static readonly cssClasses: {
                                                                                              HELPER_TEXT_PERSISTENT: string;
                                                                                              HELPER_TEXT_VALIDATION_MSG: string;
                                                                                              ROOT: string;
                                                                                              };

                                                                                                property defaultAdapter

                                                                                                static readonly defaultAdapter: MDCTextFieldHelperTextAdapter;

                                                                                                property strings

                                                                                                static readonly strings: {
                                                                                                ARIA_HIDDEN: string;
                                                                                                ROLE: string;
                                                                                                ROOT_SELECTOR: string;
                                                                                                };

                                                                                                  method getId

                                                                                                  getId: () => string | null;

                                                                                                    method isPersistent

                                                                                                    isPersistent: () => boolean;

                                                                                                      method isValidation

                                                                                                      isValidation: () => boolean;
                                                                                                      • whether the helper text acts as an error validation message.

                                                                                                      method isVisible

                                                                                                      isVisible: () => boolean;

                                                                                                        method setContent

                                                                                                        setContent: (content: string) => void;
                                                                                                        • Sets the content of the helper text field.

                                                                                                        method setPersistent

                                                                                                        setPersistent: (isPersistent: boolean) => void;
                                                                                                        • Parameter isPersistent

                                                                                                          Sets the persistency of the helper text.

                                                                                                        method setValidation

                                                                                                        setValidation: (isValidation: boolean) => void;
                                                                                                        • Parameter isValidation

                                                                                                          True to make the helper text act as an error validation message.

                                                                                                        method setValidity

                                                                                                        setValidity: (inputIsValid: boolean) => void;
                                                                                                        • Sets the validity of the helper text based on the input validity.

                                                                                                        method showToScreenReader

                                                                                                        showToScreenReader: () => void;
                                                                                                        • Makes the helper text visible to the screen reader.

                                                                                                        class MDCTextFieldIcon

                                                                                                        class MDCTextFieldIcon extends MDCComponent<MDCTextFieldIconFoundation> {}

                                                                                                          property foundationForTextField

                                                                                                          readonly foundationForTextField: MDCTextFieldIconFoundation;

                                                                                                            method attachTo

                                                                                                            static attachTo: (root: Element) => MDCTextFieldIcon;

                                                                                                              method getDefaultFoundation

                                                                                                              getDefaultFoundation: () => MDCTextFieldIconFoundation;

                                                                                                                class MDCTextFieldIconFoundation

                                                                                                                class MDCTextFieldIconFoundation extends MDCFoundation<MDCTextFieldIconAdapter> {}

                                                                                                                  constructor

                                                                                                                  constructor(adapter?: Partial<MDCTextFieldIconAdapter>);

                                                                                                                    property cssClasses

                                                                                                                    static readonly cssClasses: { ROOT: string };

                                                                                                                      property defaultAdapter

                                                                                                                      static readonly defaultAdapter: MDCTextFieldIconAdapter;

                                                                                                                      property strings

                                                                                                                      static readonly strings: { ICON_EVENT: string; ICON_ROLE: string };

                                                                                                                        method destroy

                                                                                                                        destroy: () => void;

                                                                                                                          method handleInteraction

                                                                                                                          handleInteraction: (evt: MouseEvent | KeyboardEvent) => void;

                                                                                                                            method init

                                                                                                                            init: () => void;

                                                                                                                              method setAriaLabel

                                                                                                                              setAriaLabel: (label: string) => void;

                                                                                                                                method setContent

                                                                                                                                setContent: (content: string) => void;

                                                                                                                                  method setDisabled

                                                                                                                                  setDisabled: (disabled: boolean) => void;

                                                                                                                                    Interfaces

                                                                                                                                    interface MDCTextFieldAdapter

                                                                                                                                    interface MDCTextFieldAdapter
                                                                                                                                    extends MDCTextFieldRootAdapter,
                                                                                                                                    MDCTextFieldInputAdapter,
                                                                                                                                    MDCTextFieldLabelAdapter,
                                                                                                                                    MDCTextFieldLineRippleAdapter,
                                                                                                                                    MDCTextFieldOutlineAdapter {}
                                                                                                                                    • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                                                                                                    interface MDCTextFieldCharacterCounterAdapter

                                                                                                                                    interface MDCTextFieldCharacterCounterAdapter {}
                                                                                                                                    • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                                                                                                    method setContent

                                                                                                                                    setContent: (content: string) => void;
                                                                                                                                    • Sets the text content of character counter element.

                                                                                                                                    interface MDCTextFieldFoundationMap

                                                                                                                                    interface MDCTextFieldFoundationMap {}

                                                                                                                                      property characterCounter

                                                                                                                                      characterCounter: MDCTextFieldCharacterCounterFoundation;

                                                                                                                                        property helperText

                                                                                                                                        helperText: MDCTextFieldHelperTextFoundation;

                                                                                                                                          property leadingIcon

                                                                                                                                          leadingIcon: MDCTextFieldIconFoundation;

                                                                                                                                            property trailingIcon

                                                                                                                                            trailingIcon: MDCTextFieldIconFoundation;

                                                                                                                                              interface MDCTextFieldHelperTextAdapter

                                                                                                                                              interface MDCTextFieldHelperTextAdapter {}
                                                                                                                                              • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                                                                                                              method addClass

                                                                                                                                              addClass: (className: string) => void;
                                                                                                                                              • Adds a class to the helper text element.

                                                                                                                                              method getAttr

                                                                                                                                              getAttr: (attr: string) => string | null;
                                                                                                                                              • the specified attribute's value on the helper text element.

                                                                                                                                              method hasClass

                                                                                                                                              hasClass: (className: string) => boolean;
                                                                                                                                              • Returns whether or not the helper text element contains the given class.

                                                                                                                                              method removeAttr

                                                                                                                                              removeAttr: (attr: string) => void;
                                                                                                                                              • Removes an attribute from the helper text element.

                                                                                                                                              method removeClass

                                                                                                                                              removeClass: (className: string) => void;
                                                                                                                                              • Removes a class from the helper text element.

                                                                                                                                              method setAttr

                                                                                                                                              setAttr: (attr: string, value: string) => void;
                                                                                                                                              • Sets an attribute with a given value on the helper text element.

                                                                                                                                              method setContent

                                                                                                                                              setContent: (content: string) => void;
                                                                                                                                              • Sets the text content for the helper text element.

                                                                                                                                              interface MDCTextFieldIconAdapter

                                                                                                                                              interface MDCTextFieldIconAdapter {}
                                                                                                                                              • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                                                                                                              method deregisterInteractionHandler

                                                                                                                                              deregisterInteractionHandler: <K extends any>(evtType: K, handler: any) => void;
                                                                                                                                              • Deregisters an event listener on the icon element for a given event.

                                                                                                                                              method getAttr

                                                                                                                                              getAttr: (attr: string) => string | null;
                                                                                                                                              • Gets the value of an attribute on the icon element.

                                                                                                                                              method notifyIconAction

                                                                                                                                              notifyIconAction: () => void;
                                                                                                                                              • Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon.

                                                                                                                                              method registerInteractionHandler

                                                                                                                                              registerInteractionHandler: <K extends any>(evtType: K, handler: any) => void;
                                                                                                                                              • Registers an event listener on the icon element for a given event.

                                                                                                                                              method removeAttr

                                                                                                                                              removeAttr: (attr: string) => void;
                                                                                                                                              • Removes an attribute from the icon element.

                                                                                                                                              method setAttr

                                                                                                                                              setAttr: (attr: string, value: string) => void;
                                                                                                                                              • Sets an attribute on the icon element.

                                                                                                                                              method setContent

                                                                                                                                              setContent: (content: string) => void;
                                                                                                                                              • Sets the text content of the icon element.

                                                                                                                                              interface MDCTextFieldInputAdapter

                                                                                                                                              interface MDCTextFieldInputAdapter {}

                                                                                                                                                method deregisterInputInteractionHandler

                                                                                                                                                deregisterInputInteractionHandler: <K extends any>(
                                                                                                                                                evtType: K,
                                                                                                                                                handler: any
                                                                                                                                                ) => void;
                                                                                                                                                • Deregisters an event listener on the native input element for a given event.

                                                                                                                                                method getNativeInput

                                                                                                                                                getNativeInput: () => MDCTextFieldNativeInputElement | null;
                                                                                                                                                • The native <input> element, or an object with the same shape. Note that this method can return null, which the foundation will handle gracefully.

                                                                                                                                                method isFocused

                                                                                                                                                isFocused: () => boolean;
                                                                                                                                                • true if the textfield is focused. We achieve this via document.activeElement === this.root.

                                                                                                                                                method registerInputInteractionHandler

                                                                                                                                                registerInputInteractionHandler: <K extends any>(
                                                                                                                                                evtType: K,
                                                                                                                                                handler: any
                                                                                                                                                ) => void;
                                                                                                                                                • Registers an event listener on the native input element for a given event.

                                                                                                                                                method removeInputAttr

                                                                                                                                                removeInputAttr: (attr: string) => void;
                                                                                                                                                • Removes the specified attribute from the input element.

                                                                                                                                                method setInputAttr

                                                                                                                                                setInputAttr: (attr: string, value: string) => void;
                                                                                                                                                • Sets the specified attribute to the specified value on the input element.

                                                                                                                                                interface MDCTextFieldLabelAdapter

                                                                                                                                                interface MDCTextFieldLabelAdapter {}

                                                                                                                                                  method floatLabel

                                                                                                                                                  floatLabel: (shouldFloat: boolean) => void;
                                                                                                                                                  • Only implement if label exists. Floats the label above the input element if shouldFloat is true.

                                                                                                                                                  method getLabelWidth

                                                                                                                                                  getLabelWidth: () => number;
                                                                                                                                                  • Only implement if label exists. width of label in pixels.

                                                                                                                                                  method hasLabel

                                                                                                                                                  hasLabel: () => boolean;
                                                                                                                                                  • true if label element exists, false if it doesn't.

                                                                                                                                                  method setLabelRequired

                                                                                                                                                  setLabelRequired: (isRequired: boolean) => void;
                                                                                                                                                  • Only implement if label exists. Styles the label as required.

                                                                                                                                                  method shakeLabel

                                                                                                                                                  shakeLabel: (shouldShake: boolean) => void;
                                                                                                                                                  • Only implement if label exists. Shakes label if shouldShake is true.

                                                                                                                                                  interface MDCTextFieldLineRippleAdapter

                                                                                                                                                  interface MDCTextFieldLineRippleAdapter {}

                                                                                                                                                    method activateLineRipple

                                                                                                                                                    activateLineRipple: () => void;
                                                                                                                                                    • Activates the line ripple.

                                                                                                                                                    method deactivateLineRipple

                                                                                                                                                    deactivateLineRipple: () => void;
                                                                                                                                                    • Deactivates the line ripple.

                                                                                                                                                    method setLineRippleTransformOrigin

                                                                                                                                                    setLineRippleTransformOrigin: (normalizedX: number) => void;
                                                                                                                                                    • Sets the transform origin of the line ripple.

                                                                                                                                                    interface MDCTextFieldOutlineAdapter

                                                                                                                                                    interface MDCTextFieldOutlineAdapter {}

                                                                                                                                                      method closeOutline

                                                                                                                                                      closeOutline: () => void;
                                                                                                                                                      • Only implement if outline element exists. Closes notch in outline element.

                                                                                                                                                      method hasOutline

                                                                                                                                                      hasOutline: () => boolean;
                                                                                                                                                      • true if outline element exists, false if it doesn't.

                                                                                                                                                      method notchOutline

                                                                                                                                                      notchOutline: (labelWidth: number) => void;
                                                                                                                                                      • Only implement if outline element exists.

                                                                                                                                                      interface MDCTextFieldRootAdapter

                                                                                                                                                      interface MDCTextFieldRootAdapter {}

                                                                                                                                                        method addClass

                                                                                                                                                        addClass: (className: string) => void;
                                                                                                                                                        • Adds a class to the root Element.

                                                                                                                                                        method deregisterTextFieldInteractionHandler

                                                                                                                                                        deregisterTextFieldInteractionHandler: <K extends any>(
                                                                                                                                                        evtType: K,
                                                                                                                                                        handler: any
                                                                                                                                                        ) => void;
                                                                                                                                                        • Deregisters an event handler on the root element for a given event.

                                                                                                                                                        method deregisterValidationAttributeChangeHandler

                                                                                                                                                        deregisterValidationAttributeChangeHandler: (observer: MutationObserver) => void;
                                                                                                                                                        • Disconnects a validation attribute observer on the input element.

                                                                                                                                                        method hasClass

                                                                                                                                                        hasClass: (className: string) => boolean;
                                                                                                                                                        • true if the root element contains the given class name.

                                                                                                                                                        method registerTextFieldInteractionHandler

                                                                                                                                                        registerTextFieldInteractionHandler: <K extends any>(
                                                                                                                                                        evtType: K,
                                                                                                                                                        handler: any
                                                                                                                                                        ) => void;
                                                                                                                                                        • Registers an event handler on the root element for a given event.

                                                                                                                                                        method registerValidationAttributeChangeHandler

                                                                                                                                                        registerValidationAttributeChangeHandler: (
                                                                                                                                                        handler: (attributeNames: string[]) => void
                                                                                                                                                        ) => MutationObserver;
                                                                                                                                                        • Registers a validation attribute change listener on the input element. Handler accepts list of attribute names.

                                                                                                                                                        method removeClass

                                                                                                                                                        removeClass: (className: string) => void;
                                                                                                                                                        • Removes a class from the root Element.

                                                                                                                                                        Type Aliases

                                                                                                                                                        type MDCTextFieldCharacterCounterFactory

                                                                                                                                                        type MDCTextFieldCharacterCounterFactory = (
                                                                                                                                                        el: Element,
                                                                                                                                                        foundation?: MDCTextFieldCharacterCounterFoundation
                                                                                                                                                        ) => MDCTextFieldCharacterCounter;

                                                                                                                                                          type MDCTextFieldHelperTextFactory

                                                                                                                                                          type MDCTextFieldHelperTextFactory = (
                                                                                                                                                          el: Element,
                                                                                                                                                          foundation?: MDCTextFieldHelperTextFoundation
                                                                                                                                                          ) => MDCTextFieldHelperText;

                                                                                                                                                            type MDCTextFieldIconFactory

                                                                                                                                                            type MDCTextFieldIconFactory = (
                                                                                                                                                            el: Element,
                                                                                                                                                            foundation?: MDCTextFieldIconFoundation
                                                                                                                                                            ) => MDCTextFieldIcon;

                                                                                                                                                              type MDCTextFieldNativeInputElement

                                                                                                                                                              type MDCTextFieldNativeInputElement = Pick<
                                                                                                                                                              HTMLInputElement,
                                                                                                                                                              'disabled' | 'maxLength' | 'type' | 'value' | 'required'
                                                                                                                                                              > & {
                                                                                                                                                              validity: Pick<ValidityState, 'badInput' | 'valid'>;
                                                                                                                                                              };

                                                                                                                                                                Package Files (18)

                                                                                                                                                                Dependencies (14)

                                                                                                                                                                Dev Dependencies (0)

                                                                                                                                                                No dev dependencies.

                                                                                                                                                                Peer Dependencies (0)

                                                                                                                                                                No peer dependencies.

                                                                                                                                                                Badge

                                                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/textfield.

                                                                                                                                                                • Markdown
                                                                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/textfield)
                                                                                                                                                                • HTML
                                                                                                                                                                  <a href="https://www.jsdocs.io/package/@material/textfield"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>