[TextField] How to use the "pattern" attribute?

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

An input text field can have a pattern attribute containing a regex string, which the browser natively uses for validation (HTML5 spec).

Current Behavior

Currently, passing pattern to TextField does not transmit it to the underlying input, making native regex validation impossible.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/wy56937zy5

Your Environment

Tech	Version
Material-UI	1.0.0-beta.20
React	16.0.0
browser	Chrome

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:10 (2 by maintainers)

Top GitHub Comments

24reactions

lk9100commented, Aug 8, 2020

took me a while 🙈

✅ inputProps: {{pattern: '[a-z]'}} ❌ InputProps: {{pattern: '[a-z]'}}

21reactions

verekiacommented, Nov 8, 2017

My bad! The inputProps prop can be used to transmit props to the input:

https://codesandbox.io/s/wy56937zy5

Top Results From Across the Web

HTML input pattern Attribute - W3Schools

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission. Note: The pattern attribute works ......

HTML attribute: pattern - HTML: HyperText Markup Language

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types. The pattern attribute, when specified, is ......

Input Pattern: Use It To Add Basic Data Validation In HTML5 »

The pattern attribute of the <input> element allows you to add basic data validation without resorting to JavaScript. It works by matching the...

How to apply a pattern to a TextField to only allow specific ...

Below is an example showing this working. The "pattern" attribute on input won't prevent invalid characters from being entered, ...

HTML5 Form Validation With the “pattern” Attribute - Web Design

The pattern attribute is only applicable on the input element. It allows us to define our own rule to validate the input value...