question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Request to add [Component] Input Masks

See original GitHub issue

I need my text inputs to have an input mask to describe and enforce a certain format: e.g. “(999) 999-9999”. I was hoping react-input-mask would work with chakra, but it doesn’t seem possible. This seems like a common requirement, so it would be nice to support that.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

11reactions
zgid123commented, Jan 8, 2021

I don’t know what problem did you guys face when using the react-input-mask with chakra-ui. I just added react-input-mask for my project and it works well. Here a quick CodeSandbox

3reactions
nbarthelcommented, Mar 5, 2021

I don’t know what problem did you guys face when using the react-input-mask with chakra-ui. I just added react-input-mask for my project and it works well. Here a quick CodeSandbox

The code sandbox isn’t masking… Am I missing something?

Nevermind, not enough coffee. It is working.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Implementing react-input-mask for web apps - LogRocket Blog
Learn how to avoid transcription errors in React using input masks, which provide user-friendly constraints for your user input fields.
Read more >
Input mask | U.S. Web Design System (USWDS)
An input mask is a string expression that constrains input to support valid input ... Component preview. Social Security Number Input Mask.
Read more >
How to create a reusable input component with custom mask ...
Hello everyone, in this tutorial I'm going to show you how you can create a reusable input component with parameters for you to...
Read more >
Control data entry formats with input masks - Microsoft Support
In this article · About input masks · Characters that define input masks · When to avoid using input masks in Access ·...
Read more >
Formatting input masks in components
You can specify a mask or pattern to apply to text entered in a component (such as a phone number). Input masks can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found