InputNumeric

Input numeric Props

Default value

The current number box value.

Type: Number

Default Value: 0

disabled

Specifies whether the UI component responds to user interaction.

Type: Boolean

Default Value: false

format

Specifies the value's display format and controls user input accordingly

const number = 1.2345;
 
type: "fixedPoint" // 1
type: "decimal" // 1.2345
type: "percent" // 123%
type: "currency" // $1

const largeNumber = 1000000000;
 
type: "exponential" // 1.0E+9
type: "thousands" // 1,000,000K
type: "millions" // 1,000M
type: "billions" // 1B
type: "trillions" // 0T
type: "largeNumber" // 1B (uses "thousands", "millions", "billions", or "trillions", depending on the value)

Custom format string

Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and characters displayed as is. The format property supports the following wildcard characters:

Format character

Description

A digit. Displays '0' if the formatted number does not have a digit in that position.

Up to 15 of leading digits, a single digit, or nothing. If this character goes first in the format string, it can match multiple leading digits (before the decimal point). Subsequent characters match a single digit. If the formatted number does not have a digit in the corresponding position, it displays nothing. For example, if you apply format "#0.#" to "123.45", the result is "123.4".

A decimal separator. Actual character depends on locale.

A group separator. Actual character depends on locale.

The percent sign. Multiplies the input value by 100.

;

Separates positive and negative format patterns. For example, the "#0.##;(#0.##)" format displays a positive number according to the pattern before the semicolon (";"), and a negative number according to the pattern after the semicolon (";"). If you do not use this character and the additional pattern, negative numbers display a minus ("-") prefix.

Escape characters

You can display the special characters above as literals if you enclose them in single quotation marks. For example, '%'.

Other characters

You can add any literal characters to the beginning or end of the format string.

The examples below demonstrate the behavior of "#" and "0" in fractional numbers:

const number = 1234.567;
 
// Leave the first digit before the decimal point and round up the decimal
format: "0.0" // 4.6
 
const smallNumber = 0.1234;
 
// Display nothing in place of a digit
format: "#.#" // .1
 
const largeNumber = 123456.789;
 
// Add a group separator
format: ",##0.###" // 123,456.789

The examples below show different ways to apply percentage formatting to decimals. Use caution if your format string starts with a zero ('0'), because the formatted number may lose leading digits.

const smallNumber = 0.01234;
 
// Represent as a percentage and limit to two decimal digits
format: "#0.##%" // 1.23%
 
// Add a percent sign and limit to two decimal digits
format: "#0.##'%'" // 0.01%