npmpackage.info

Gathering detailed insights and metrics for @material/mwc-textfield

Other packages similar to @material/mwc-textfield

@authentic/mwc-textfield

0.9.0

A [Material Components](https://material.io/develop/) tab indicator implementation using [Web Components](https://www.webcomponents.org/introduction)

@dev.mohe/mwc-textfield

0.19.3

Material Design textfield web component

Gathering detailed insights and metrics for @material/mwc-textfield

@material/mwc-textfield - 0.27.0 | npmpackage.info

@material/mwc-textfield

Material Design Web Components

0.27.0

10,161

Apache-2.0

TypeScript

197.99 kB

6.1

Installations

npm install @material/mwc-textfield

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.6.0

NPM Version

lerna/3.22.1/node@v18.6.0+arm64 (darwin)

Pull Requests

Open

38

Total

4,231

Closed

2,012

Merged

2,181

Issues

Open

116

Total

1,364

Closed

1,248

Releases

v2.3.0

Updated on Mar 27, 2025

v2.2.0

Updated on Sep 17, 2024

v2.1.0

Updated on Aug 21, 2024

v2.0.0

Updated on Jul 25, 2024

v1.5.1

Updated on Jun 25, 2024

v1.5.0

Updated on May 23, 2024

View All 65 releases

Languages

TypeScript

SCSS

JavaScript

CSS

HTML

TypeScript (55.5%)

SCSS (42.02%)

JavaScript (1.33%)

CSS (0.72%)

HTML (0.44%)

Developer

material-components

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

10,161 Stars

4,998 Commits

976 Forks

204 Watchers

22 Branches

131 Contributors

Updated on Jul 16, 2025

Maintainers

View All 131 Contributors

Package Meta Information

Latest Version

0.27.0

Package Id

@material/mwc-textfield@0.27.0

Unpacked Size

197.99 kB

Size

36.31 kB

File Count

NPM Version

lerna/3.22.1/node@v18.6.0+arm64 (darwin)

Node Version

18.6.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@material/floating-label @material/line-ripple @material/mwc-base @material/mwc-floating-label @material/mwc-line-ripple @material/mwc-notched-outline @material/textfield lit tslib

Dev Dependencies

@material/mwc-icon @material/notched-outline @material/ripple @material/shape @material/theme

`<mwc-textfield>`

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Text fields let users enter and edit text.

Material Design Guidelines: text fields

Demo

Installation

1npm install @material/mwc-textfield

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Standard / Filled

1<mwc-textfield label="My Textfield"></mwc-textfield>
2
3<script type="module">
4  import '@material/mwc-textfield/mwc-textfield.js';
5</script>

Icon - Leading

1<mwc-textfield label="My Textfield" icon="event"></mwc-textfield>
2
3<script type="module">
4  import '@material/mwc-textfield/mwc-textfield.js';
5  import '@material/mwc-icon/mwc-icon-font.js';
6</script>

Icon - Trailing

1<mwc-textfield label="My Textfield" iconTrailing="delete"></mwc-textfield>

Helper Text

1<mwc-textfield label="My Textfield" helper="Helper Text"></mwc-textfield>

Primary Color

1<style>
2  mwc-textfield {
3    --mdc-theme-primary: green;
4  }
5</style>
6
7<mwc-textfield
8    label="My Textfield"
9    iconTrailing="delete"
10    required>
11</mwc-textfield>

Variants

Outlined

1<mwc-textfield
2    outlined
3    label="My Textfield"
4    iconTrailing="delete">
5</mwc-textfield>

Shaped

1<style>
2  mwc-textfield.rounded {
3    --mdc-shape-small: 28px;
4  }
5</style>
6
7<mwc-textfield
8    class="rounded"
9    label="My Textfield"
10    outlined>
11</mwc-textfield>

API

Properties/Attributes

Name	Type	Description
`value`	`string`	The input control's value.
`type`	`TextFieldType*`	A string specifying the type of control to render.
`label`	`string`	Sets floating label value.
`placeholder`	`string`	Sets disappearing input placeholder.
`prefix`	`string`	Prefix text to display before the input.
`suffix`	`string`	Suffix text to display after the input.
`icon`	`string`	Leading icon to display in input. See `mwc-icon`.
`iconTrailing`	`string`	Trailing icon to display in input. See `mwc-icon`.
`disabled`	`boolean`	Whether or not the input should be disabled.
`charCounter`	`boolean`	Note: requries `maxLength` to be set. Display character counter with max length.
`outlined`	`boolean`	Whether or not to show the material outlined variant.
`helper`	`string`	Helper text to display below the input. Display default only when focused.
`helperPersistent`	`boolean`	Always show the helper text despite focus.
`required`	`boolean`	Displays error state if value is empty and input is blurred.
`maxLength`	`number`	Maximum length to accept input.
`validationMessage`	`string`	Message to show in the error color when the textfield is invalid. (Helper text will not be visible)
`pattern`	`string`	`HTMLInputElement.prototype.pattern` (empty string will unset attribute)
`min`	`number`\|`string`	`HTMLInputElement.prototype.min` (empty string will unset attribute)
`max`	`number`\|`string`	`HTMLInputElement.prototype.max` (empty string will unset attribute)
`size`	`number`\|`null`	`HTMLInputElement.prototype.size` (null will unset attribute)
`step`	`number`\|`null`	`HTMLInputElement.prototype.step` (null will unset attribute)
`autoValidate`	`boolean`	Reports validity on value change rather than only on blur.
`validity`	`ValidityState` (readonly)	The `ValidityState` of the textfield.
`willValidate`	`boolean` (readonly)	`HTMLInputElement.prototype.willValidate`
`validityTransform`	`ValidityTransform**`\|`null`	Callback called before each validation check. See the validation section for more details.
`validateOnInitialRender`	`boolean`	Runs validation check on initial render.
`name`	`string`	Sets the `name` attribute on the internal input.***

* TextFieldType is exported by mwc-textfield and mwc-textfield-base

1type TextFieldType = 'text'|'search'|'tel'|'url'|'email'|'password'|
2    'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';

** ValidityTransform is not exported. See the validation section for more details.

1type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>

*** The name property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute. See #289.

Methods

Name	Description
`checkValidity() => boolean`	Returns `true` if the textfield passes validity checks. Returns `false` and fires an `invalid` event on the textfield otherwise. NOTE: When accessing any property or function that checks validity at textfield initial boot up, you may have to await `<mwc-textfield>.updateComplete`.
`reportValidity() => boolean`	Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.
`setCustomValidity(message:string) => void`	Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.
`layout() => Promise<void>`	Re-calculate layout. If a textfield is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.

CSS Custom Properties

Inherits CSS Custom properties from:

Name	Default	Description
`--mdc-text-field-filled-border-radius`	`4px 4px 0 0`	Border radius of the standard / filled textfield's background filling.
`--mdc-text-field-idle-line-color`	`rgba(0, 0, 0, 0.42)`	Color of the filled textfield's bottom line when idle.
`--mdc-text-field-hover-line-color`	`rgba(0, 0, 0, 0.87)`	Color of the filled textfield's bottom line when hovering.
`--mdc-text-field-disabled-line-color`	`rgba(0, 0, 0, 0.06)`	Color of the filled textfield's bottom line when disabled.
`--mdc-text-field-outlined-idle-border-color`	`rgba(0, 0, 0, 0.38)`	Color of the outlined textfield's outline when idle.
`--mdc-text-field-outlined-hover-border-color`	`rgba(0, 0, 0, 0.87)`	Color of the outlined textfield's outline when hovering.
`--mdc-text-field-outlined-disabled-border-color`	`rgba(0, 0, 0, 0.06)`	Color of the outlined textfield's outline when disabled.
`--mdc-text-field-fill-color`	`rgb(245, 245, 245)`	Color of the textfield's background fill (non-outlined).
`--mdc-text-field-disabled-fill-color`	`rgb(250, 250, 250)`	Color of the textfield's background fill (non-outlined) when disabled.
`--mdc-text-field-ink-color`	`rgba(0, 0, 0, 0.87)`	Color of the input text.
`--mdc-text-field-label-ink-color`	`rgba(0, 0, 0, 0.6)`	Color of the non-focused floating label, helper text, char counter, and placeholder.
`--mdc-text-field-disabled-ink-color`	`rgba(0, 0, 0, 0.37)`	Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.

Global Custom Properties

This component exposes the following global theming custom properties.

Name	Description
`--mdc-theme-primary`	Color when active of the underline ripple, the outline, and the caret.
`--mdc-theme-error`	Color when errored of the underline, the outline, the caret, and the icons.
`--mdc-typography-subtitle1-<PROPERTY>`	Styles the typography of the textfield.

Validation

<mwc-textfield> follows the basic <input> constraint validation model. It exposes:

required
maxLength
pattern
min
max
step
validity
willValidate
checkValidity()
reportValidity()
setCustomValidity(message)

Additionally, it implements more features such as:

validationMessage
validateOnInitialRender
and validityTransform

By default, <mwc-textfield> will report validation on blur.

Custom validation logic

The validityTransform property is a function that can be set on <mwc-textfield> to implement custom validation logic that transforms the ValidityState of the input control. The type of a ValidityTransform is the following:

1(value: string, nativeValidity: ValidityState) => Partial<ValidityState>

Where value is the new value in the textfield to be validated and nativeValidity is an interface of ValidityState of the native input control. For example:

1<mwc-textfield
2    id="my-textfield"
3    pattern="[0-9]+"
4    value="doggos">
5</mwc-textfield>
6<script>
7  const textfield = document.querySelector('#my-textfield');
8  textfield.validityTransform = (newValue, nativeValidity) => {
9    if (!nativeValidity.valid) {
10      if (nativeValidity.patternMismatch) {
11        const hasDog = newValue.includes('dog');
12        // changes to make to the nativeValidity
13        return {
14          valid: hasDog,
15          patternMismatch: !hasDog;
16        };
17      } else {
18        // no changes
19        return {};
20      }
21    } else {
22      const isValid = someExpensiveOperation(newValue);
23      // changes to make to the native validity
24      return {
25        valid: isValid,
26        // or whatever type of ValidityState prop you would like to set (if any)
27        customError: !isValid,
28      };
29    }
30  }
31</script>

In this example we first check the native validity which is invalid due to the pattern mismatching (the value is doggos which is not a number). The value includes dog, thus we make it valid and undo the pattern mismatch.

In this example, we also skip an expensive validity check by short-circuiting the validation by checking the native validation.

Note: the UI will only update as valid / invalid by checking the valid property of the transformed ValidityState.

Additional references

MDC Web textfields

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

6

SAST

Determines if the project uses static code analysis.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-catalog.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/build-catalog.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-catalog.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/build-catalog.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-catalog.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/build-catalog.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/commitlint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/commitlint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/firebase-hosting-merge.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-merge.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/firebase-hosting-merge.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-merge.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/firebase-hosting-merge.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-merge.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/firebase-hosting-merge.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-merge.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/firebase-hosting-pull-request.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-pull-request.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/firebase-hosting-pull-request.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-pull-request.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/firebase-hosting-pull-request.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-pull-request.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/firebase-hosting-pull-request.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/firebase-hosting-pull-request.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/nightly.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/nightly.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/nightly.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nightly.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/nightly.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/nightly.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-docs-on-main.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-docs-on-main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-docs-on-main.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-docs-on-main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-docs-on-main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-docs-on-main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-docs-on-main.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-docs-on-main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-size-on-main.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-size-on-main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-size-on-main.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-size-on-main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-size-on-main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-size-on-main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-size-on-main.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-web/update-size-on-main.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/commitlint.yml:17
Info: 0 out of 23 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 13 third-party GitHubAction dependencies pinned
Info: 9 out of 10 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More