Masked Edit for Input field

[muratcorlu]

We need to consider adding masked edit (or formatted input) capability to our Input component. This discussion is about what features need to be included in our Design System and what others are not. I can list some potential features to discuss:

• Leading and trailing text/icon for inputs (Adding $ sign to the front or a unit -like cm- to the end)
• Strictly formatted inputs (like telephone numbers, credit card numbers or a postcode) Those kind of input always have same amount of characters, so it can be masked easily. But types like "price" is not easy to "mask" since the same input can accept both $1.50 and $1,500.
• Allowed characters (or disallowed characters). Being able to just use allowed characters (without providing a mask) can be helpful for price.

Since we are creating a Design System, our components should be as generic as possible for the common requirements of the project types we want to cover. Features that we'll add should not add too much, unnecessary complexity. But at the same time, the very common requirements like above should be possible to cover with Baklava UI elements. This can be either directly implemented in Baklava, or we may give some flexibility to developers to implement their custom functionalities easily.

Please write your thoughts and considerations about this topic. Then we can clearly understand the requirements and the way we act on this.

[muratcorlu]

We have an issue for the leading/trailing text requirement: #391 Others can still be discussed.

[stovein]

There are some masking packages we can use,
imask
maska