Comprehensive guide for implementing Syncfusion React input components including Uploader, NumericTextBox, TextBox, TextArea, CheckBox, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox, and Rating. Use this when building file upload UIs with async/chunk uploads, drag-and-drop functional

Implementing Syncfusion React Inputs Uploader The Syncfusion React UploaderComponent provides a rich file upload control with async upload, drag and drop, chunk upload with pause/resume/cancel, validation, templates, form integration, and accessibility support. Navigation Guide 🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation). Getting Started 📄 Read: [references/getting started.md](references/uploader getting started.md) Installing @syncfusion/ej2 react inputs 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2 react inputs . Verify with npm audit License registration Basic UploaderComponent usage in JSX/TSX CSS theme imports Drop area configuration Success and failure event handling Asynchronous Upload 📄 Read: [references/async upload.md](references/uploader async upload.md) asyncSettings with saveUrl and removeUrl Multiple vs. single file upload ( multiple ) Auto upload vs. manual upload ( autoUpload ) Sequential upload ( sequentialUpload ) Preloaded files ( files property) Adding custom HTTP headers via uploading / removing events Server side save/remove action examples Chunk Upload 📄 Read: [references/chunk upload.md](references/uploader chunk upload.md) Enabling chunk upload with asyncSettings.chunkSize Retry configuration ( retryCount , retryAfterDelay ) Pause and resume chunked uploads ( pause , resume methods) Cancel uploads ( cancel method) chunkSuccess and chunkFailure events Server side chunk handling (C ) Validation 📄 Read: [references/validation.md](references/uploader validation.md) Allowed file extensions ( allowedExtensions ) File size limits ( minFileSize , maxFileSize ) Maximum file count using selected event Duplicate file prevention Drag and drop image validation File Sources 📄 Read: [references/file source.md](references/uploader file source.md) Clipboard paste upload Directory/folder upload ( directoryUpload ) Drag and drop with custom drop area ( dropArea ) Customizing drop area appearance Templates and Customization 📄 Read: [references/template customization.md](references/uploader template customization.md) File list template property Custom upload UI with showFileList: false Customizing action buttons ( buttons property) Progress bar customization Hiding the default drop area Style and appearance overrides Advanced How To Scenarios 📄 Read: [references/advanced how to.md](references/uploader advanced how to.md) Programmatic file upload ( upload method, getFilesData ) Invisible/background upload Image preview before uploading Resize images before upload Sort selected files Check file size / MIME type before upload Confirm dialog before file removal Open/edit uploaded files Trigger file browser from external button Convert uploaded image to binary JWT authentication for secure upload ⚠️ Never hardcode tokens. Retrieve from a secure session store at runtime. Do not log request headers or token values. Form support (HTML form, template driven, reactive) Localization (custom locale strings) Accessibility and keyboard navigation API Reference 📄 Read: [references/api.md](references/uploader api.md) All properties ( allowedExtensions , asyncSettings , autoUpload , buttons , cssClass , directoryUpload , dropArea , dropEffect , enabled , files , htmlAttributes , locale , maxFileSize , minFileSize , multiple , sequentialUpload , showFileList , template , and more) All methods ( upload , remove , cancel , pause , resume , retry , clearAll , getFilesData , bytesToSize , createFileList , sortFileList ) All events ( uploading , success , failure , selected , removing , change , progress , chunkSuccess , chunkFailure , chunkUploading , actionComplete , beforeRemove , beforeUpload , canceling , clearing , fileListRendering , pausing , resuming , created ) Quick Start Example Common Patterns Auto Upload with Validation Manual Upload with Custom Buttons Chunk Upload for Large Files Key Decision Guide Need Property/Event Server URLs asyncSettings.saveUrl + asyncSettings.removeUrl Auto vs manual upload autoUpload (default: true ) Large file upload asyncSettings.chunkSize Restrict file types allowedExtensions Limit file size maxFileSize / minFileSize Preload files from server files prop Upload one at a time sequentialUpload: true Entire folder upload directoryUpload: true Custom drop target dropArea Custom file list UI template or showFileList: false Add auth headers uploading event → args.currentRequest.setRequestHeader() Send extra form data uploading event → args.customFormData NumericTextBox The Syncfusion React NumericTextBoxComponent is a specialized input control for numeric data entry with support for number formatting (currency, percentage, scientific notation), min/max range validation, spin buttons, decimal precision control, internationalization, RTL languages, and full WCAG 2.2 accessibility compliance. Documentation & Navigation Guide 🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation). When the user needs help with NumericTextBox, guide them to the appropriate reference: Getting Started 📄 Read: [references/getting started.md](references/numerictextbox getting started.md) Installation and package setup CSS imports and themes React component import and basic JSX Creating your first NumericTextBox Running the application Formats & Validation 📄 Read: [references/formats and validation.md](references/numerictextbox formats and validation.md) Standard format specifiers (currency, percentage, number, scientific) Custom number formats with and 0 patterns Range validation with min and max properties strictMode for enforcing valid ranges Real world formatting examples Spin Buttons & Step Control 📄 Read: [references/spin buttons and step.md](references/numerictextbox spin buttons and step.md) Enabling/disabling spin button arrows Step property for increment values Customizing spin button appearance and behavior Precision with step increments Keyboard shortcuts (Arrow Up/Down) Adornments & Styling 📄 Read: [references/adornments and styling.md](references/numerictextbox adornments and styling.md) Prefix and suffix text (units, currency symbols) CSS classes and custom styling Placeholder, disabled, and readonly states Focus and blur event handling Theme customization and appearance options Precision & Decimals 📄 Read: [references/precision decimals.md](references/numerictextbox precision decimals.md) decimals property for controlling decimal places validateDecimalOnType for real time precision validation Maintaining trailing zeros in display Rounding behavior and edge cases Precision during input vs display Two Way Binding & Forms 📄 Read: [references/two way binding forms.md](references/numerictextbox two way binding forms.md) Two way value binding in React (value prop + onChange) Controlled component patterns React state management React Hook Form integration Form validation with NumericTextBox Globalization & Accessibility 📄 Read: [references/globalization accessibility.md](references/numerictextbox globalization accessibility.md) Internationalization and locale support Right to Left (RTL) language support WCAG 2.2 accessibility compliance Keyboard navigation and shortcuts Screen reader support with ARIA attributes Focus management and color contrast API Reference 📄 Read: [references/api.md](references/numerictextbox api.md) Complete properties reference (value, min, max, step, format, decimals, etc.) Methods reference (increment, decrement, getText, focusIn, focusOut, destroy, etc.) Events reference with full argument types (change, blur, focus, created, destroyed) Quick Start Example Here's a minimal working example to get started: Key points: Import NumericTextBoxComponent from @syncfusion/ej2 react inputs Import required CSS themes (material3 in this example) Use value prop for the current numeric value Use onChange event to update React state Add min , max , step for validation and controls Common Patterns 1. Currency Input 2. Percentage Input 3. Integer Only Input 4. Bounded Range with Validation 5. Form Field with Label Key Properties Reference Property Type Purpose value number Current numeric value min number Minimum allowed value max number Maximum allowed value step number Increment/decrement step (default: 1) decimals number Number of decimal places when focused format string Number format (n2, c2, p2, e2, etc.) currency string ISO 4217 currency code (e.g., 'USD', 'EUR') placeholder string Placeholder text when empty floatLabelType FloatLabelType Float label behavior ('Never', 'Always', 'Auto') readonly boolean Prevent user input enabled boolean Enable or disable the control (default: true) strictMode boolean Enforce min/max validation (default: true) validateDecimalOnType boolean Restrict decimal length during typing showSpinButton boolean Show/hide spinner arrows (default: true) showClearButton boolean Show/hide clear icon allowMouseWheel boolean Enable mouse wheel increment/decrement (default: true) cssClass string Additional CSS classes for custom styling width number \ string Width of the component Common Use Cases 1. Shopping Cart Quantity Input Integer only, min=1, step=1, spinner for easy adjustment 2. Price Calculator Currency Field format="c2", min=0, prefix="$", two decimal places 3. Rating or Score 0 100 Range min=0, max=100, strictMode=true, no decimals 4. Discount Percentage format="p", min=0, max=100, two decimal places 5. Measurement Input decimals=2, suffix=" cm", min=0, spinner for precision 6. Financial Form format="c2", validation, form integration, accessibility Next Steps 1. Package requirement: The packages @syncfusion/ej2 react inputs , @syncfusion/ej2 base , and @syncfusion/ej2 buttons must be present in your project's package.json . Confirm they are already installed and that your lockfile (e.g., package lock.json or yarn.lock ) pins their versions for supply chain integrity. When adding them, use an explicit version range such as @syncfusion/ej2 react inputs@^27.x.x to avoid unpinned dependency risks. 2. Getting Started reference: For installation details and basic setup, see [references/getting started.md](references/numerictextbox getting started.md). 3. Choose your reference: Based on your use case (formatting, validation, forms, etc.), navigate to the relevant reference section above. 4. Review examples: Each reference contains ready to use code samples that can be adapted to your requirements. 5. Customize: Modify the examples to fit your specific use case and application needs. For detailed implementation guidance, navigate to the appropriate reference file above. TextBox The TextBox component is a lightweight input control that captures user text input with support for floating labels, validation states, icons, and advanced features. This skill guides you through implementing, configuring, and customizing the TextBox component in React applications. Navigation Guide 🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each acti

syncfusion-react-inputs