[NumberField] Support custom decimal separator

[Tockra]

Summary

When the Number Input support decimal numbers in future, it would be nice to control the separator.
E.g. by an optional property "separator: string" which allows to choose a own separator based on the websites locale. If not set it could determine the separator by the browser settings.

Examples

<NumberInput
  aria-label="Demo number input"
  placeholder="Type a number…"
  value={value}
  onChange={(event, val) => setValue(val)}
/> {// uses default browser locale}

<NumberInput
  aria-label="Demo number input"
  separator=","
  placeholder="Type a number…"
  value={value}
  onChange={(event, val) => setValue(val)}
/> {// accepts 1231,50 (means -> 1231.50)}

<NumberInput
  aria-label="Demo number input"
  separator="."
  placeholder="Type a number…"
  value={value}
  onChange={(event, val) => setValue(val)}
/> {// accepts 1231.50 }

<NumberInput
  aria-label="Demo number input"
  separator="#"
  placeholder="Type a number…"
  value={value}
  onChange={(event, val) => setValue(val)}
/> {// accepts 1231#50 (means -> 1231.50)}

Motivation

Multi language support of decimal numbers

Search keywords: separator, decimal, number, input,textfield

Search keywords:

[mj12albert]

@Tockra In the new API, we have a format prop that takes Intl.NumberFormat options:

<NumberField format={/* options */} />

Would that work for your use-case?

[Tockra]

@Tockra In the new API, we have a format prop that takes Intl.NumberFormat options:

<NumberField format={/* options */} />

Would that work for your use-case?

Thank you for your answere. This prop seems to be good for my usecase.
Is it already present in the current stable mui version?

[mj12albert]

Is it already present in the current stable mui version?

@base-ui-components/react is just released and you can try the NumberField now: https://base-ui.com/react/components/number-field

This will come to Material UI in an upcoming major release!