How can we set thousand separator input number?

[vuvikingit]

I want the input data to be of numeric type, but automatically display on UI with thousand separators.
How can I set ?

[mahtabhnp]

Hi,
I’m interested in working on this issue. Could you please assign it to me? This will be my first contribution, and I’m excited to get started. Let me know if there are any specific guidelines or steps I should follow.

Thank you!
@ukrbublik

[mahtabhnp]

Hi @ukrbublik ,

I’m currently working on the task to add a thousand separator to the numeric input, but I was hoping you could clarify or provide more details about a few points that are a bit unclear:
Should the thousand separator also support decimal points (e.g., 1,234.56)?
How should the input behave when users are typing numbers? Should they see the formatted number immediately, or only after they finish typing?
When sending data to the backend, should the number be in a raw format (without separators) or formatted?
Is there any specific library or approach you recommend for implementing this (e.g., Intl.NumberFormat, numeral.js)? Or should it be done manually?
Does this input need to support localization for different regions (e.g., commas vs periods for thousand separators)?
Let me know if you can provide additional details or examples to help ensure the implementation meets expectations. Thanks in advance for your guidance!

[ukrbublik]

On backend it should be always number not string.

Should they see the formatted number immediately, or only after they finish typing?

I think yes, immediately

Please consider using react-number-format as in example:
https://mui.com/material-ui/react-text-field/#integration-with-3rd-party-input-libraries

I think props like

thousandsGroupStyle="lakh"
  thousandSeparator=","

(And others maybe like prefix, suffix)
should go to fieldSettings to be configurable by user