React Numeric TextBox

The Numeric TextBox is a specialized input control for precise and flexible numeric data entry in web applications.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Numeric TextBox component to the project.

Installing Syncfusion® React packages

To use the Numeric TextBox component, install the @syncfusion/react-inputs package:

npm install @syncfusion/react-inputs

Adding CSS reference

To use the Numeric TextBox component, you need to import the Syncfusion® CSS styles in the application. You can import the required CSS styles from the following package.

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

Adding Numeric TextBox component

To include the Numeric TextBox component in your application, import the NumericTextBox from the @syncfusion/react-inputs package in App.tsx.

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

You can use the following code snippet to add the Numeric TextBox component to the application.

import {  NumericTextBox } from "@syncfusion/react-inputs";
import './App.css';

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

Run the project

To run the project, use the following command:

npm run dev

The following sample shows how to use the Numeric TextBox component in the application.

Steps

The Numeric TextBox component features a step property that lets you set precise increment values, enabling users to adjust numeric inputs with ease using spin buttons.

Spin buttons

By default, the Numeric TextBox component displays a spin button (spinButton is set to true). This behavior can be disabled by setting the spinButton property to false in the configuration.

Formats

Customize your Numeric TextBox with the format property for value display, defaulting to 'n2' (two decimal places) when the field loses focus.

Sizes

The Numeric TextBox component enables you to set a more compact input by utilizing its size property.

Disabled

When the disabled attribute is set to true, the Numeric TextBox component cannot be edited or focused.

ReadOnly

When the readOnly attribute is set to true, the Numeric TextBox component cannot be edited.

Value range

Implement input validation in your Numeric TextBox with range control: use min for lower limits and max for upper limits and when strictMode is enabled, out-of-range values are automatically corrected to the nearest limit.

Float label

The floating label functionality offers three distinct behavioral modes: Never, Auto and Always.

Value parsing

The Numeric TextBox component allows you to create custom methods for formatting and parsing the user input.

Controlled vs Uncontrolled

This component implements both controlled and uncontrolled state management paradigms, offering developers implementation flexibility:

• Controlled: Use the value property to manage the component state from a parent component. In this mode, the parent is responsible for passing the value and handling any state updates. This approach is ideal for complex UIs where you need centralized control and a predictable data flow.

• Uncontrolled: Use the defaultValue property to set the initial value and let the component manage its own state internally. This is a simpler, "fire-and-forget" approach that is perfect for standalone inputs or scenarios where you don't need to manage the state externally.

Validate on type

The Numeric TextBox component validates input dynamically as you type when validateOnType is enabled, ensuring that decimal values are correctly formatted according to the specified precision, which in this case is set to 3 decimal places. When it is disabled, allows the user to type more decimal places.

Strict mode

When strictMode is off, the Numeric TextBox allows values outside the defined minimum and maximum range without automatically correcting them. When strictMode is on, any out-of-range value entered is automatically adjusted to the nearest valid limit instead of displaying an error.

Accessibility

The Numeric TextBox component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Numeric TextBox component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Numeric TextBox component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Numeric TextBox component: