@material/textfield

@material/textfield

Version 14.0.0
Published 1 year ago
1.54 MB
15 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

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?: MDCRippleFactory,
    lineRippleFactory?: MDCLineRippleFactory,
    helperTextFactory?: MDCTextFieldHelperTextFactory,
    characterCounterFactory?: MDCTextFieldCharacterCounterFactory,
    iconFactory?: MDCTextFieldIconFactory,
    labelFactory?: MDCFloatingLabelFactory,
    outlineFactory?: MDCNotchedOutlineFactory
) => 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;

See MDCTextFieldCharacterCounterAdapter for typing information on parameters and return types.

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;

See MDCTextFieldAdapter for typing information on parameters and return types.

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;

See MDCTextFieldHelperTextAdapter for typing information on parameters and return types.

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;

See MDCTextFieldIconAdapter for typing information on parameters and return types.

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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 (15)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto 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>

Updated 1 year ago.
Package analyzed in 4045 ms.
Missing or incorrect documentation? Open an issue for this package.

@material/textfield

Install

Overview

Index

Variables

Classes

Interfaces

Type Aliases

Variables

variable ALWAYS_FLOAT_TYPES

variable characterCountCssClasses

variable characterCountStrings

variable cssClasses

variable helperTextCssClasses

variable helperTextStrings

variable iconCssClasses

variable iconStrings

variable numbers

variable strings

variable VALIDATION_ATTR_WHITELIST

Classes

class MDCTextField

property disabled

property max

property maxLength

property min

property minLength

property pattern

property prefixText

property required

property ripple

property step

property suffixText

property valid

property value

method attachTo

method destroy

method focus

method getDefaultFoundation

method initialize

method initialSyncWithDOM

method layout

class MDCTextFieldCharacterCounter

property foundationForTextField

method attachTo

method getDefaultFoundation

class MDCTextFieldCharacterCounterFoundation

constructor

property cssClasses

property defaultAdapter

property strings

method setCounterValue

class MDCTextFieldFoundation

constructor

Parameter adapter

Parameter foundationMap

property cssClasses

property defaultAdapter

property numbers

property shouldFloat

property shouldShake

property strings

method activateFocus

method autoCompleteFocus

method deactivateFocus

method destroy

method getValidateOnValueChange

method getValue

method handleInput

method handleTextFieldInteraction

method handleValidationAttributeChange

method init

method isDisabled

method isValid

method notchOutline

method setDisabled

Parameter disabled

method setHelperTextContent

Parameter content

method setLeadingIconAriaLabel