Instant formatting in NumberField using Intl.NumberFormat

[ggomarighetti]

Provide a general summary of the feature here

This feature would introduce a new option for the NumberField component and its hook to allow for real-time input formatting. Currently, the value formatting with Intl.NumberFormat is applied on the onBlur event. The proposal is to allow this formatting to be triggered on onChange or onInput to provide users with an instant, as-you-type formatting experience.

🤔 Expected Behavior?

As a user types into the NumberField, the input's value should be instantly formatted according to the Intl.NumberFormat options on each keystroke.

😯 Current Behavior

Currently, the NumberField component and its useNumberField hook apply formatting using Intl.NumberFormat only when the input loses focus (on the blur event).

💁 Possible Solution

There is currently a repository that implements this feature using Intl.NumberFormat on an input in an agnostic manner and with zero dependencies.

https://github.com/dm4t2/intl-number-input

🔦 Context

This feature is crucial for applications that handle high-stakes numerical input, such as financial transactions or precise measurements, where clarity and accuracy are paramount.

The current onBlur-only formatting significantly increases the cognitive load on the user. When a user has to input a large number, they are presented with a long, unformatted string of digits. This makes it difficult to visually verify the input's magnitude and accuracy in real time.

For example, consider entering a currency value like $9,699,966. Without instant formatting, the user has to type 9699966. It becomes extremely difficult to track position and distinguish between the visually similar 6s and 9s. It's very easy to accidentally type 9969966 or 9699699 and not notice the error until after submitting the form.

With as-you-type formatting, the input would provide immediate visual landmarks.

• When the input value is 969 and the user types another 9, the field would instantly reformat the value to 9,699.
• Similarly, as they continue typing to 969,996 and then add a 6, the value would become 9,699,966.

💻 Examples

https://dm4t2.github.io/intl-number-input/playground/

This corresponds to the possible solution I attached above. It has different settings that can be adjusted. The one that involves this issue would be “Distraction Free Input” at the bottom of the page.

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

I'm confused. In the example link, the formatting disappears entirely when I focus the input and I cannot type formatting characters like $ at all. In addition, typing the "," character is replaced with a "." which is very confusing. So this is actually not formatting as I type, it's formatting on blur. Am I missing something?

[ggomarighetti]

Hi @devongovett

Yes, that library calls it “Distraction Free Input.” You can disable it at the bottom of the page.

It provides exactly the functionality you mentioned.