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

Input mask option for the Input component #3598

Open
LiveAaE opened this issue Aug 28, 2024 · 2 comments
Open

Input mask option for the Input component #3598

LiveAaE opened this issue Aug 28, 2024 · 2 comments

Comments

@LiveAaE
Copy link

LiveAaE commented Aug 28, 2024

**To EDS <3 **

Related problem
in some context typing in is a easier step then having to use date picker. Specially when there is many dates to put in.

Solution
Having an option to use auto mask will then give a more easy input and at the same time be more error profe rather then displaying errors after. It will however depend on the context what seems best to use. But it would be amazing to also have this option.

Describe the solution you'd like
Have looked at the react library for inspiration https://coreui.io/react/docs/forms/input-mask/.
image

This would mean that when users types in a field where it should be dates we can sett it so that.

  • shows a visualization of the expected values
  • Dont allow any other values then numbers.
  • Month input don’t allow numbers that don’t fit for the month values (01-12).
  • Year input dont alow numbers that dont fit into a year range (1970-2099).

image

Thank you for your time and lot's of creeds for the great work you do!

@oddvernes
Copy link
Collaborator

Hello! This react-imask library looks interesting!

It looks like with a bit of ts-ignore it can be applied to an eds Input

Image

I wasnt able to get "placeholderChar" to show though in my quick test but seems to otherwise work

Image

Definetly something to look more into when we have time. However, we probably won't do anything beyond making a storybook example for how to use this and perhaps make some smaller changes to the code to facilitate the wrapper better (typescript issue & palceholder characters showing), otherwise it is up to the users to install this dependency and make their own wrapper 👍

@oddvernes
Copy link
Collaborator

imask documentation
react-imask github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants