Thousands separator comma number input

I am trying to add commas to numbers for the thousands separator.
The number text type (not the input one) works as it has a “1000 separator”
Why isn’t this included in the number input type?

Is there a simple way to make this work without using code?
I have tried the AI Javascript method but can’t get it to work even though the “expected format” suggested that it should.

See image below. The green circles are the number text type with a 1000 separator and the red circles are the number input type with no 1000 separator available

1 Like

Hello, I give you a solution, maybe a little bit complex, but it’s no code

  • Add a input like normal, give it type is Text - “Short Answer”
  • Create a variable name “value” to store it’s value
  • Add plugin NPM
  • Search and add package “Numeral” in plugin NPM
  • Add action “On change” of input, set variable “value” to the new value from Event
  • Bind initial value of the input using the formula below

Have a nice day !

No good reason as far as I know. Just created the product ticket so the tech team can look into it :slight_smile:

Thanks for bringing it up!

2 Likes

Thanks Joyce

On the web, “number” inputs don’t allow thousand-separator commas or other locale-specific formatting. That’s why on mobile they can pop up with the keypad rather than a full keyboard. This is different than a display element, which is read-only and would be a string that includes a formatted representation of the number.

One can make an auto-formatting version of a number in the input live through some clever onchange and regular expression work. But it’s complicated, and it would not translate easily across languages/locales.

The approach I have seen work best is to have the input be a simple number, and show a display element bound to the value being input that is showing the formatted version. So If I type “3000” I see “3,000” in the associated display element. The latter is updated immediately as I type/change value.

2 Likes

Thanks, the feature will be highly appreciated

For developers like me from Brazil. This is extremely important. See how FlutterFlow inputs are formatted.
waiting for the separation of thousands in Input to be able to use Weweb again…

1 Like

Agh yes, we’re aware. It’s on the roadmap but don’t have an ETA :confused:

1 Like

Consegui resolver aqui no Brasil, colocar virgula e ponto.

Please! This missing feature blocks the whole weweb for us to use in a business app. Without a thousands separator the users always type the number wrong. It is significant with high values… we need a german forman:

1.500.000,00 € on an input field with the value 1500000,00

I even got this working in elementor with a form plugin.