basic

NumberFormatter

Formats a numeric input based on user browser's locale.

If no value is provided `blankLabel` is returned.

If an invalid value is provided `invalidValueLabel` is returned.

This is the [default formatter](doc:getFormatterForField) used for [NumberField](doc:NumberField), [DecimalField](doc:DecimalField),
[CurrencyField](doc:CurrencyField), [FloatField](doc:FloatField) and [IntegerField](doc:IntegerField)


props

NumberFormatterProps

ReactElement

What to render when `value` is `null`, `undefined` or an empty string

blankLabel

ReactNode

What to render when passed value is not a valid number

invalidValueLabel

The [localeOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#using_options) passed to
[Number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString).

localeOptions

Intl.NumberFormatOptions

The [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#using_locales) option passed to
[Number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString).

locales

The number to format. If `value` is a `string` then value will be coerced to `Number` and if the result is `NaN` then
`invalidValueLabel` will be returned;

NumberFormatter
This is a React component

Examples

ExamplesJavascriptTypescript

Examples