Best alternative for HTML5 input-type numbers with a modern look.
Automatically format input values as percentages or currency.
Min and max range validation of input values, plus decimal validation.
Built-in formatting and restrictions.

4.5 / 5

(600+ Reviews)

Trusted by the world’s leading companies

React numeric textbox

Overview

The React Numeric Textbox component is an easy replacement of the number-type HTML input element. It is used to get number inputs from users. It has several out-of-the-box features, such as number format support, precision control, validation, and spin buttons.

Numeric TextBox with different formats

React Numeric Textbox code example

Get started with the React Numeric TextBox component using a few simple lines of TSX code, as demonstrated below. Explore this React Numeric TextBox example to see how to render and configure the component.

import {  NumericTextBox } from "@syncfusion/react-inputs";

export default function App() {
    return (
        <div className="component-section">
            <NumericTextBox
                placeholder="Enter value"
                width={250}
            />
        </div>
    );
};

Controlled mode

The React Numeric TextBox component supports both controlled and uncontrolled modes, offering flexibility in managing its state. This dual-mode capability allows integration into a wide range of application architectures, accommodating different state management strategies.

Numeric TextBox controlled mode documentation

Numeric TextBox with different formats

Number formats

Format the Numeric TextBox with one of the number formats listed on MSDN or custom numeric format strings. Through number formatting, percentage and currency text box behavior can be achieved. Custom formats allow users to place any symbol or text as a prefix or suffix to the input number.

Standard formats demo

Custom formats

The Numeric TextBox supports custom formats, which allow users to place any symbol or text as a prefix or suffix to the input number.

Precision control

Allows precise control over the number of decimal values entered. Input precision can be limited to any desired length dynamically as the value is being typed, ensuring accurate data entry and improved validation.

Validate on type documentation

React input with spin buttons

Spin buttons make it easy for users to increase or decrease the number value by clicking. They provide a flexible way to interact with the text box.

The appearance of spin buttons is customizable, and these buttons can also be hidden as required.

Hide the spin button icons

Numeric TextBox without spin buttons

React Numeric TextBox incremental steps

Predefined steps

Increment or decrement values based on a predefined step value. This functionality simplifies data entry, especially when working with large numbers, by allowing adjustments through custom step intervals.

Step demo

Form support and validation

The React Numeric TextBox checks if the entered number is within a set minimum and maximum range. This helps stop users from typing values that are too low or too high.

The form validator can also be integrated to perform any custom validation.

Value range

Globalization

The React Numeric TextBox component comes with built-in globalization, supporting different cultures and languages. It adapts to any culture through easily configurable settings.

Numeric TextBox with globalization

Numeric TextBox with RTL

Right-to-left (RTL)

The component supports right-to-left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Web accessibility

Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Follows the WCAG 2.0 standard in the design of the UI visual elements such as foreground color, background color, line spacing, text, and images.

Developer-friendly APIs

The React Numeric TextBox component offers a comprehensive set of developer-friendly APIs, enabling full control over its UI elements and behaviors. This flexibility ensures seamless customization and integration, delivering an optimal experience for end users across various application scenarios.

Numeric TextBox API documentation

Not sure how to create your first React Numeric TextBox? Our documentation can help.

I’d love to read it now

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

GRIDS

Data Grid

DATA VISUALIZATION

Charts

NAVIGATION

BUTTONS

INPUTS

LAYOUT

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose Syncfusion React Numeric TextBox?

The Syncfusion React Numeric TextBox component provides the following features:

An enhanced replacement for the HTML number input with a modern UI.
Built-in number formatting for currency, percentage, and custom patterns.
Min/max value range, decimal precision control, and validation.
Convenient spin buttons and customizable step increments.
Simple configuration and rich APIs.
Globalization and right-to-left (RTL) support.
Supports all modern browsers.
Mobile-touch friendly and responsive.
One of the best React Numeric TextBoxes in the market that offers a feature-rich UI to interact with numeric data.
Extensive demos to learn quickly and get started with React Numeric TextBox.

✅ Where can I find the Syncfusion React Numeric TextBox demo?

You can find our React Numeric TextBox demo here, which demonstrates how to render and configure the Numeric TextBox.

✅ Can I download and utilize the Syncfusion React Numeric TextBox for free?

No, this is a commercial product and requires a paid license. However, a free Community License is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.