[TextField] Mask
See original GitHub issue- There is an idea for apply masks in textfields?
- Why I need pass props like
fullWidth={true}
, why not simply passfullWidth
? Because single props without values returns abool
.
Example:
<TextField mask="9999-9999-9999-9999" />
<TextField mask="99-999-aaa" fullWidth primary raised />
Thanks!
Issue Analytics
- State:
- Created 8 years ago
- Reactions:4
- Comments:18 (10 by maintainers)
Top Results From Across the Web
How Can I Mask My Material-UI TextField? - Stack Overflow
I'm trying to use react-input-mask plugin with Material-UI. But if i want to change input value, this is not updating the my main...
Read more >Mask Material UI TextField - CodeSandbox
Mask Material UI TextField. 0. Embed Fork Create Sandbox Sign in. Sandbox Info. Mask Material UI TextField. 0. 7.9k. 170. anandthanki1anandthanki1.
Read more >React Text Field component - Material UI - MUI
The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......
Read more >Input Masking | CSS-Tricks
I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use...
Read more >Input masking | React Material-UI Cookbook - Packt Subscription
Here's how you can use the MaskedInput component from react-text-mask with TextField components to add masking abilities:.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@kylem038 I used
react-number-format
in our lib like:It worked well, and should work for your input too (assuming you want all the extras
TextField
brings. It would be great if you would be willing to PR the demos.@kybarg
react-maskedinput
does look simpler, but it also looks less well maintained. How about ifTextField
took a prop to substitute the<input>
element with an arbitrary React component and passed themask
prop (&&|| a more genericinputProps
) to it?