Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
verekia opened this issue Nov 8, 2017 · 10 comments
Closed
1 task done

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

verekia opened this issue Nov 8, 2017 · 10 comments
Labels
component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement

Comments

@verekia
Copy link

verekia commented Nov 8, 2017

  • 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
Copy link
Author

verekia commented Nov 8, 2017

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

https://codesandbox.io/s/wy56937zy5

@verekia verekia closed this as completed Nov 8, 2017
@adriangabardo
Copy link

@verekia life saver, thanks

@anuj-datopic

This comment has been minimized.

@farzad-jafari

This comment has been minimized.

@lk9100
Copy link

lk9100 commented Aug 8, 2020

took me a while 🙈

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

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 8, 2020

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

@LavaGolem
Copy link

LavaGolem commented Feb 1, 2021

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
Copy link
Member

oliviertassinari commented Feb 1, 2021

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

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

@oliviertassinari oliviertassinari added component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement labels Feb 1, 2021
@oliviertassinari oliviertassinari changed the title [TextField] "pattern" attribute [TextField] How to use the "pattern" attribute? Feb 1, 2021
@ldiaz89

This comment has been minimized.

@sanoj-chaudhary
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

9 participants