# React Input Components The Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form-validator, designed to capture user input in React applications. ## Setup To install `inputs` and its dependent packages, use the following command, ```sh npm install @syncfusion/react-inputs ``` ## React Form The Form component provides comprehensive form validation and state management functionality with built-in validation rules and field interaction tracking. It offers a powerful way to handle complex forms with real-time validation, error handling, and submission management. **Key features** - **Built-in Validation Rules:** Comprehensive set of 15+ validation rules including required, email, URL, date, number, length constraints, ranges, and custom pattern matching. - **Real-time Validation:** Support for immediate validation on field changes or validation on blur/submit. - **State Management:** Complete form state tracking including field values, errors, touched/visited states, and modification tracking. - **Custom Validation:** Support for custom validation functions with full access to field values for complex business logic validation. - **Cross-field Validation:** EqualTo validation for comparing field values such as password confirmation fields. - **Initial Values:** Support for pre-populated form fields with validation on initial load. **Usage** ```tsx import React, { useState } from 'react'; import { Form, FormField, FormState } from '@syncfusion/react-inputs'; export default function App() { const [formState, setFormState] = useState(); return (
console.log(data)} onFormStateChange={setFormState} > formState?.onChange('username', { value: e.target.value })} onBlur={() => formState?.onBlur('username')} onFocus={() => formState?.onFocus('username')} /> {formState?.errors?.username && (
{formState.errors.username}
)}
); } ``` **Resources** - [Form Demo/Docs](https://react.syncfusion.com/react-ui/form) - [Form API](https://react.syncfusion.com/api/form/overview) ## 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. **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. **Usage** ```tsx import { NumericTextBox } from "@syncfusion/react-inputs"; export default function App() { return ( ); } ``` **Resources** - [Numeric TextBox Demo/Docs](https://react.syncfusion.com/react-ui/numeric-textbox) - [Numeric TextBox API](https://react.syncfusion.com/api/numeric-textbox/overview) ## 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. **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. **Usage** ```tsx import { TextArea } from '@syncfusion/react-inputs'; export default function App() { return (