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

[verekia]

• 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

[verekia]

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

https://codesandbox.io/s/wy56937zy5

[adriangabardo]

@verekia life saver, thanks

[lk9100]

took me a while 🙈

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

[oliviertassinari]

@lk9100 See #11377 for improving the current solution. Having two props that only differ by the casing can be confusing.

[LavaGolem]

Is there a way to use both inputProps and InputProps in a TextField? I need inputProps for pattern and InputProps for styling input field.

[oliviertassinari]

Is there a way to use both inputProps and InputProps in a TextField?

@LavaGolem Yes, you can use both, React props are case sensitive.

[sanoj-chaudhary]

<TextField inputProps={{ className: classes.input, pattern: "[a-z]{1,15}" }} />