React

Search results

Getting started with React NumericTextBox component

08 Dec 2022 / 6 minutes to read

The following section explains the required steps to build the NumericTextBox component with its basic usage in step by step procedure.

Dependencies

The following list of dependencies are required to use the NumericTextBox component in your application.

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-react-base

Installation and configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use NumericTextBox component.

To install NumericTextBox component, use the following command

npm install @syncfusion/ej2-react-inputs –save

Adding NumericTextBox to the application

Now, you can start adding NumericTextBox component to the application. We have added NumericTextBox component in src/App.tsx file using following code.

[Class-component]

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10} /> ,document.getElementById('numericContainer'));

[Functional-component]

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
function App(){
  return(
  <NumericTextBoxComponent value={10} />
);
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

Adding CSS reference

Import the NumericTextBox component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";

Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

Run the application

Now use the npm run start command to run the application in the browser.

npm run start

The below example shows the NumericTextBox.

[Class-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10} />, document.getElementById('numericContainer'));

[Functional-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
    return <NumericTextBoxComponent value={10}/>;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
  return <NumericTextBoxComponent value={10} />;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

Range validation

You can set the minimum and maximum range of values in the NumericTextBox using the min and max properties, so the numeric value should be in the min and max range.

The validation behavior depends on the strictMode property.

[Class-component]

Source

Preview

index.jsx

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 minimum and maximum range values
// strictMode has been enabled by defualt
ReactDOM.render(<NumericTextBoxComponent min={10} max={20} value={16} step={2}/>, document.getElementById('numericContainer'));

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

// initializes NumericTextBox component
// sets the minimum and maximum range values
// strictMode has been enabled by defualt
ReactDOM.render(<NumericTextBoxComponent min={10} max={20} value={16} step={2} />
  ,document.getElementById('numericContainer'));

[Functional-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
    return <NumericTextBoxComponent min={10} max={20} value={16} step={2}/>;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
  return <NumericTextBoxComponent min={10} max={20} value={16} step={2} />;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

Formatting the value

User can set the format of the NumericTextBox component using format property. The value will be displayed in the specified format, when the component is in focused out state. For more information about formatting the value, refer to this link.

The below example demonstrates format the value by using currency format value c2.

[Class-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='c2' value={10}/>, document.getElementById('numericContainer'));

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

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

[Functional-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
    return <NumericTextBoxComponent format="c2" value={10}/>;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

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

// initializes NumericTextBox component
// sets value to the NumericTextBox
function App() {
  return <NumericTextBoxComponent format="c2" value={10} />;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

Precision of numbers

You can restrict the number of decimals to be entered in the NumericTextBox by using the decimals and validateDecimalOnType properties. So, you can’t enter the number whose precision is greater than the mentioned decimals.

If validateDecimalOnType is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.

[Class-component]

Source

Preview

index.jsx

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// restricts number of decimals to be entered in the NumericTextBox by enabling validateDecimalOnType property
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent validateDecimalOnType={true} decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Enabled' floatLabelType='Auto'/>, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// validateDecimalOnType is false by default. So, number of decimals will not be restricted.
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Disabled' floatLabelType='Auto'/>, document.getElementById('numericContainer2'));

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

// initializes NumericTextBox component
// restricts number of decimals to be entered in the NumericTextBox by enabling validateDecimalOnType property
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent validateDecimalOnType={true} decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Enabled' floatLabelType='Auto' />
,document.getElementById('numericContainer1'));

// initializes NumericTextBox component
// validateDecimalOnType is false by default. So, number of decimals will not be restricted.
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Disabled' floatLabelType='Auto' /> ,document.getElementById('numericContainer2'));

[Functional-component]

Source

Preview

index.jsx

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 validateDecimalOnType={true} decimals={3} format="n3" value={10} placeholder="ValidateDecimalOnType Enabled" floatLabelType="Auto"/>);
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
function App2() {
    return (<NumericTextBoxComponent decimals={3} format="n3" value={10} placeholder="ValidateDecimalOnType Disabled" floatLabelType="Auto"/>);
}
ReactDOM.render(<App2 />, document.getElementById('numericContainer2'));

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
  validateDecimalOnType={true}
  decimals={3}
  format="n3"
  value={10}
  placeholder="ValidateDecimalOnType Enabled"
  floatLabelType="Auto"
/>
  );
}
ReactDOM.render(<App1 />, document.getElementById('numericContainer1'));

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

Getting started with React NumericTextBox component

Dependencies

Installation and configuration

Adding Syncfusion packages

Adding NumericTextBox to the application

Adding CSS reference

Run the application

Range validation

Formatting the value

Precision of numbers

See Also