Formats in React NumericTextBox component

21 Feb 20269 minutes to read

Format the display of numeric values in the NumericTextBox using the format property. When the component loses focus, the value appears in the specified format. The NumericTextBox supports both standard numeric format strings (for common scenarios like currency and percentages) and custom numeric format strings (for specialized formatting needs).

Standard formats

From the standard numeric formats, you can use the numeric related format specifiers such as n,p and c in the NumericTextBox component. By using these format specifiers, you can achieve the percentage and currency textbox behavior also.

The below example demonstrates percentage and currency formats.

[Class-component]

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets percentage with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='p2' value={0.5} min={0} max={1} step={0.01} placeholder='Percentage format' floatLabelType='Auto'/>, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='c2' value={10} placeholder='Currency format' floatLabelType='Auto'/>, document.getElementById('numericContainer2'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets percentage with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='p2' value={0.5} min={0} max={1} step={0.01} placeholder='Percentage format' floatLabelType='Auto' />
,document.getElementById('numericContainer1'));

// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='c2' value={10} placeholder='Currency format' floatLabelType='Auto' />
,document.getElementById('numericContainer2'));

[Functional-component]

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets percentage with 2 numbers of decimal places format
function App1() {
    return (<NumericTextBoxComponent format="p2" value={0.5} min={0} max={1} step={0.01} placeholder="Percentage format" floatLabelType="Auto"/>);
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
function App2() {
    return (<NumericTextBoxComponent format="c2" value={10} placeholder="Currency format" floatLabelType="Auto"/>);
}
ReactDOM.render(<App2 />, document.getElementById('numericContainer2'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets percentage with 2 numbers of decimal places format
function App1() {
  return (
    <NumericTextBoxComponent
      format="p2"
      value={0.5}
      min={0}
      max={1}
      step={0.01}
      placeholder="Percentage format"
      floatLabelType="Auto"
    />
  );
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));

// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
function App2() {
  return (
    <NumericTextBoxComponent
      format="c2"
      value={10}
      placeholder="Currency format"
      floatLabelType="Auto"
    />
  );
}
ReactDOM.render(<App2 />, document.getElementById('numericContainer2'));

Custom formats

From the custom numeric format string, you can provide any custom format by combining one or more custom specifiers.

The below examples demonstrate format the value by using currency format string # and 0.

[Class-component]

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets the format using custom format string `#`
ReactDOM.render(<NumericTextBoxComponent format='###.##' value={10} placeholder='Custom format string #' floatLabelType='Auto'/>, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// sets the format using custom format string `0`
ReactDOM.render(<NumericTextBoxComponent format='000.00' value={10} placeholder='Custom format string 0' floatLabelType='Auto'/>, document.getElementById('numericContainer2'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets the format using custom format string `#`
ReactDOM.render(<NumericTextBoxComponent format='###.##' value={10} placeholder='Custom format string #' floatLabelType='Auto'  />, document.getElementById('numericContainer1'));

// initializes NumericTextBox component
// sets the format using custom format string `0`
ReactDOM.render(<NumericTextBoxComponent format='000.00' value={10} placeholder='Custom format string 0' floatLabelType='Auto' />, document.getElementById('numericContainer2'));

[Functional-component]

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets the format using custom format string `#`
function App1() {
    return (<NumericTextBoxComponent format="###.##" value={10} placeholder="Custom format string #" floatLabelType="Auto"/>);
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// sets the format using custom format string `0`
function App2() {
    return (<NumericTextBoxComponent format="000.00" value={10} placeholder="Custom format string 0" floatLabelType="Auto"/>);
}
ReactDOM.render(<App2 />, document.getElementById('numericContainer2'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets the format using custom format string `#`
function App1() {
  return (
    <NumericTextBoxComponent
      format="###.##"
      value={10}
      placeholder="Custom format string #"
      floatLabelType="Auto"
    />
  );
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));

// initializes NumericTextBox component
// sets the format using custom format string `0`
function App2() {
  return (
    <NumericTextBoxComponent
      format="000.00"
      value={10}
      placeholder="Custom format string 0"
      floatLabelType="Auto"
    />
  );
}
ReactDOM.render(<App2 />, document.getElementById('numericContainer2'));