@syncfusion/react-inputs/README.md

A package of Pure react input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.

# React Inputs Components

## What's Included in the React Inputs Package

The React Inputs package includes the following list of components.

### React Numeric TextBox

The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns.

Explore the demo [here](https://react.syncfusion.com/numeric-textbox).

**Key features**

- **Value constraints:** Set minimum and maximum allowed values to restrict user input within specific numeric ranges.

- **Step configuration:** Define increment/decrement step size for precise value adjustments using spin buttons or keyboard controls.

- **Spin buttons:** Optional increment and decrement buttons that allow users to adjust values without typing.

- **Number formatting:** Comprehensive formatting options including decimal places, currency symbols, and percentage formatting.
 
- **LabelMode** Implements floating label functionality with configurable behavior modes to enhance form usability.

- **Keyboard navigation:** Enhanced keyboard support for incrementing/decrementing values using arrow keys.

### React TextArea

The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems.

Explore the demo [here](https://react.syncfusion.com/textarea).

**Key features**

- **Resizing options:** Supports multiple resize modes including Both, Horizontal, and Vertical to control how users can resize the input area.

- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.

- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.

- **Customizable dimensions:** Supports setting specific dimensions through rows and cols properties or through width styling.

- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.

### React TextBox

The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements.

Explore the demo [here](https://react.syncfusion.com/textbox).

**Key features**

- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.

- **Sizes:** Provides size options (Small and Medium) to control the component's dimensions for different UI contexts.

- **Color:** Supports different color schemes including Success, Warning, and Error to visually communicate validation states.

- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability.

- **Prefix and suffix:** Supports adding custom icons at the beginning or end of the input field for enhanced visual cues.

- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches.

<p align="center">
Trusted by the world's leading companies
  <a href="https://www.syncfusion.com/">
    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
  </a>
</p>

## Setup

To install `inputs` and its dependent packages, use the following command,

```sh
npm install @syncfusion/react-inputs
```

## Support

Product support is available through following mediums.

* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* Live chat

## Changelog

Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/inputs/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.

## License and copyright

> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).

> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.

&copy; Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.