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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-inputs/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  // ⚠️ Replace with your own server-side endpoints.
  // Never use third-party demo URLs in production — files will be sent to that external server.
  const asyncSettings = {
    saveUrl: '/api/upload/save',
    removeUrl: '/api/upload/remove'
  };

  const onSuccess = (args: any) => {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  };

  const onFailure = (args: any) => {
    console.error('Upload failed:', args.file.name);
  };

  return (
    <UploaderComponent
      asyncSettings={asyncSettings}
      autoUpload={false}
      success={onSuccess}
      failure={onFailure}
    />
  );
}

Common Patterns

Auto Upload with Validation

<UploaderComponent
  asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }}
  allowedExtensions=".pdf,.doc,.docx"
  maxFileSize={5000000}
  multiple={true}
/>

Manual Upload with Custom Buttons

<UploaderComponent
  asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }}
  autoUpload={false}
  buttons={{ browse: 'Choose File', clear: 'Clear All', upload: 'Upload All' }}
/>

Chunk Upload for Large Files

<UploaderComponent
  asyncSettings={{
    saveUrl: '/api/upload/save',
    removeUrl: '/api/upload/remove',
    chunkSize: 500000   // 500 KB chunks
  }}
/>

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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:

import React, { useState } from 'react';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';

export default function App() {
  const [value, setValue] = useState(10);

  return (
    <div style={{ padding: '20px' }}>
      <h3>Enter a Number</h3>
      <NumericTextBoxComponent
        value={value}
        onChange={(e) => setValue(e.value)}
        min={0}
        max={100}
        step={1}
      />
      <p>Current Value: {value}</p>
    </div>
  );
}

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

<NumericTextBoxComponent
  value={99.99}
  format="c2"
  min={0}
  placeholder="Enter amount"
/>

2. Percentage Input

<NumericTextBoxComponent
  value={50}
  format="p"
  min={0}
  max={100}
/>

3. Integer-Only Input

<NumericTextBoxComponent
  value={10}
  decimals={0}
  step={1}
  min={0}
/>

4. Bounded Range with Validation

<NumericTextBoxComponent
  value={25}
  min={0}
  max={100}
  strictMode={true}
  placeholder="0-100"
/>

5. Form Field with Label

<div>
  <label>Product Quantity:</label>
  <NumericTextBoxComponent
    value={qty}
    onChange={(e) => setQty(e.value)}
    min={1}
    step={1}
    prefix="Units: "
  />
</div>

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.
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 action (install, run, file creation).

Getting Started

📄 Read: references/getting-started.md

• Vite setup for React development
• Installing @syncfusion/ej2-react-inputs package 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-inputs. Pin a specific version (e.g., @syncfusion/ej2-react-inputs@28.x.x) and verify with npm audit
• Adding CSS imports and themes
• Creating your first TextBox component
• Adding icons and floating labels
• Running the development server 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev

Features and Groups

📄 Read: references/features-and-groups.md

• Floating label behavior (Never, Always, Auto)
• Icons with addIcon() method (prepend/append)
• Clear button with showClearButton property
• Rounded corner with e-corner CSS class
• Disabled state with enabled={false}
• Multi-line textbox creation
• TextBox with clear button and floating label combinations

Styling and Sizing

📄 Read: references/styling-and-sizing.md

• Three predefined sizes: Normal, Small (e-small), Large (e-bigger)
• Applying size classes via cssClass property
• Rounded corner with e-corner CSS class
• CSS customization for TextBox wrapper and floating label
• Custom CSS classes and themes
• Responsive design patterns

Multiline TextBox

📄 Read: references/multiline-textbox.md

• Creating multiline/textarea inputs with multiline={true}
• Floating labels with multiline
• Auto-resizing textboxes
• Disabling resize functionality
• Limiting text length with htmlAttributes={{ maxlength: '...' }}
• Character counting and display

Validation and States

📄 Read: references/validation-and-states.md

• Error, warning, and success validation states via cssClass
• Applying validation classes (e-error, e-warning, e-success)
• Disabled state with enabled={false} (not disabled)
• Read-only state with readonly={true}
• Differences between disabled and read-only
• Dynamic color changes based on values using input event

Advanced Features

📄 Read: references/advanced-features.md

• Adornments: prependTemplate and appendTemplate properties
• Interactive adornments (password toggle, delete button)
• React functional components with hooks
• useState, useEffect, useRef, useReducer integration
• Event handling (created, input, change events)
• Form validation patterns

Accessibility and Migration

📄 Read: references/accessibility-and-migration.md

• WCAG 2.2, Section 508, and WAI-ARIA compliance
• Screen reader support and ARIA attributes
• Right-to-Left (RTL) support with enableRtl property
• Keyboard navigation support
• Migrating from CSS TextBox to React component
• Before/after code comparison

API Reference

📄 Read: references/api.md

• All properties: placeholder, floatLabelType, value, type, cssClass, multiline, showClearButton, enabled, readonly, enableRtl, enablePersistence, autocomplete, htmlAttributes, locale, width, prependTemplate, appendTemplate
• Methods: addIcon, addAttributes, removeAttributes, focusIn, focusOut, destroy, getPersistData
• Events: created, destroyed, change, input, focus, blur

Quick Start

Basic TextBox with Floating Label

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';

export default function App() {
  return (
    <TextBoxComponent 
      placeholder="Enter your name" 
      floatLabelType="Auto"
    />
  );
}

TextBox with Icon

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function App() {
  const textboxRef = useRef(null);

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addIcon('append', 'e-icons e-input-popup-date');
    }
  };

  return (
    <TextBoxComponent
      placeholder="Enter date"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
    />
  );
}

TextBox with Clear Button

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      placeholder="Enter your email"
      floatLabelType="Auto"
      showClearButton={true}
    />
  );
}

Multiline TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your address"
      floatLabelType="Auto"
    />
  );
}

Common Patterns

Form with Validation States

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

export default function ValidationForm() {
  const [cssClass, setCssClass] = useState('');

  return (
    <div>
      <TextBoxComponent
        placeholder="Enter username"
        cssClass={cssClass}
        floatLabelType="Auto"
        input={(e: any) => {
          if (!e.value) setCssClass('');
          else if (e.value.length < 3) setCssClass('e-error');
          else if (e.value.length < 6) setCssClass('e-warning');
          else setCssClass('e-success');
        }}
      />
    </div>
  );
}

Password TextBox with Toggle

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef, useState } from 'react';

export default function PasswordInput() {
  const textboxRef = useRef<TextBoxComponent>(null);
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    if (textboxRef.current) {
      const newVisibility = !isVisible;
      textboxRef.current.type = newVisibility ? 'text' : 'password';
      setIsVisible(newVisibility);
    }
  };

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className={`e-icons ${isVisible ? 'e-eye-slash' : 'e-eye'}`}
          onClick={toggleVisibility}
          style={{ cursor: 'pointer' }}
        ></span>
      </>
    );
  }

  return (
    <TextBoxComponent
      ref={textboxRef}
      type="password"
      placeholder="Enter password"
      floatLabelType="Auto"
      appendTemplate={appendTemplate}
    />
  );
}

Email Input with Unit Label

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function EmailInput() {
  function prependTemplate(): JSX.Element {
    return (
      <>
        <span className="e-icons e-user"></span>
        <span className="e-input-separator"></span>
      </>
    );
  }

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span>.com</span>
      </>
    );
  }

  return (
    <TextBoxComponent
      type="email"
      placeholder="Enter email"
      floatLabelType="Auto"
      prependTemplate={prependTemplate}
      appendTemplate={appendTemplate}
    />
  );
}

Rounded Corner TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RoundedCornerTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Date"
      cssClass="e-corner"
    />
  );
}

Disabled TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function DisabledTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Name"
      enabled={false}
    />
  );
}

RTL TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RTLTextBox() {
  return (
    <TextBoxComponent
      placeholder="أدخل اسمك"
      floatLabelType="Auto"
      enableRtl={true}
    />
  );
}

Auto-sizing Multiline TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function AutoSizeTextbox() {
  const textboxRef = useRef(null);

  const handleInput = () => {
    if (textboxRef.current) {
      const elem = textboxRef.current.respectiveElement;
      elem.style.height = 'auto';
      elem.style.height = elem.scrollHeight + 'px';
    }
  };

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addAttributes({ rows: 1 });
    }
    handleInput();
  };

  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your message"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
      input={handleInput}
    />
  );
}

Key Properties

Property	Type	Purpose
placeholder	string	Hint text shown when input is empty
floatLabelType	"Never" | "Always" | "Auto"	Label animation behavior
value	string	Sets the content of the TextBox
type	string	Input type (text, password, email, number, etc.)
multiline	boolean	Convert to textarea for multi-line input
showClearButton	boolean	Display clear button when input has value
cssClass	string	Apply CSS classes for sizing/validation/appearance (e.g., "e-error", "e-small", "e-corner")
enabled	boolean	Enable (true) or disable (false) input interaction
readonly	boolean	Allow selection but prevent editing
enableRtl	boolean	Enable right-to-left rendering
enablePersistence	boolean	Persist value state between page reloads ⚠️ Stores data in browser storage — enable only with explicit user consent
autocomplete	string	Control browser autocomplete ("on" | "off")
htmlAttributes	{ [key: string]: string }	Pass additional HTML attributes (e.g., { maxlength: '200' })
locale	string	Override global culture/localization value
width	number | string	Set component width
prependTemplate	() => JSX.Element	Render element before input
appendTemplate	() => JSX.Element	Render element after input

Key Events

Event	Arguments	Purpose
created	Object	Fires after component initialization
destroyed	Object	Fires when component is destroyed
change	ChangedEventArgs	Fires when value changes on focus-out
input	InputEventArgs	Fires on every keystroke
focus	FocusInEventArgs	Fires when TextBox gains focus
blur	FocusOutEventArgs	Fires when TextBox loses focus

Related Documentation

ℹ️ External links below are for manual reference only. Do not auto-fetch these URLs in an agentic pipeline without explicit user consent.

• Syncfusion React TextBox Component Demo (external)
• React TextBox API Reference (external)
• Syncfusion React Inputs Package (external — verify before installing)
• React Functional Components

CheckBox

The Syncfusion React CheckBoxComponent is a graphical UI element that allows users to select one or more options. It supports checked, unchecked, and indeterminate states, flexible label positioning, size variants, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-react-buttons

---

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

• Installing @syncfusion/ej2-react-buttons 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-buttons --save. Verify with npm audit
• CSS theme imports for Tailwind3
• Minimal CheckBoxComponent setup
• Running the Vite/React app 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev

States (Checked, Unchecked, Indeterminate, Disabled)

📄 Read: references/states.md

• Setting checked={true} for checked state
• Setting indeterminate={true} for indeterminate state
• Setting disabled={true} for disabled state
• Combined state examples

Label and Size

📄 Read: references/label-and-size.md

• label prop for caption text
• labelPosition ("Before" / "After")
• Small size via cssClass="e-small"
• Default vs. small size examples

Style and Appearance

📄 Read: references/style-and-appearance.md

• Available CSS classes for overriding checkbox styles
• Color variant customization (primary, success, warning, danger, info)
• Custom frame shapes (round checkbox)
• Custom check icon
• Theme Studio integration

Accessibility and RTL

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes (aria-disabled)
• Keyboard navigation (Space key)
• Right-to-left (enableRtl) support
• Screen reader support

How-To Guides

📄 Read: references/how-to.md

• Name and value in form submission
• Enabling right-to-left display
• Building customized checkbox variants

API Reference

📄 Read: references/api.md

• All properties: checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, indeterminate, label, labelPosition, locale, name, value
• Methods: click(), destroy(), focusIn()
• Events: change, created

---

Quick Start

npm install @syncfusion/ej2-react-buttons --save
# Then run: npm audit

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <CheckBoxComponent label="Accept Terms" />
    </div>
  );
}
export default App;

---

Common Patterns

Controlled Checkbox with Change Handler

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  const [isChecked, setIsChecked] = React.useState(false);

  const handleChange = (args: ChangeEventArgs) => {
    setIsChecked(args.checked);
  };

  return (
    <CheckBoxComponent
      label="Subscribe to newsletter"
      checked={isChecked}
      change={handleChange}
    />
  );
}
export default App;

Parent / Children with Indeterminate State

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <ul>
      {/* Parent: indeterminate when some children are selected */}
      <li><CheckBoxComponent label="Select All" indeterminate={true} /></li>
      <li><CheckBoxComponent label="Option A" checked={true} /></li>
      <li><CheckBoxComponent label="Option B" /></li>
    </ul>
  );
}
export default App;

Form Submission with Name and Value

import { CheckBoxComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <form>
      <CheckBoxComponent name="hobby" value="Reading" label="Reading" checked={true} />
      <CheckBoxComponent name="hobby" value="Gaming" label="Gaming" />
      <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
    </form>
  );
}
export default App;

---

Key Props at a Glance

Prop	Type	Default	Purpose
label	string	''	Caption text next to checkbox
checked	boolean	false	Checked state
indeterminate	boolean	false	Indeterminate (partial) state
disabled	boolean	false	Disabled state
labelPosition	'Before' | 'After'	'After'	Label placement
cssClass	string	''	Custom CSS class(es)
name	string	''	Form field name
value	string	''	Form field value
enableRtl	boolean	false	Right-to-left rendering
enablePersistence	boolean	false	Persist state across reloads ⚠️ Stores data in browser storage — enable only with explicit user consent

---

Signature

The Syncfusion React SignatureComponent renders a canvas-based signature pad that captures smooth handwritten signatures using variable-width bezier curves. It supports drawing, saving (PNG/JPEG/SVG/base64/blob), loading existing signatures, undo/redo history, customizable stroke and background appearance, and full accessibility compliance.

Package: @syncfusion/ej2-react-inputs

---

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

• Installing @syncfusion/ej2-react-inputs 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-inputs --save. Verify with npm audit
• CSS theme imports (Tailwind3)
• Minimal SignatureComponent setup
• Running the application 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev

Customization

📄 Read: references/customization.md

• Stroke width: maxStrokeWidth, minStrokeWidth, velocity
• Stroke color: strokeColor
• Background color: backgroundColor
• Background image: backgroundImage

Open and Save

📄 Read: references/open-save.md

• Load signature from base64 or URL (load)
• Save as base64 (getSignature)
• Save as Blob (saveAsBlob, getBlob)
• Save as image file — PNG, JPEG, SVG (save)
• Save with background (saveWithBackground)

User Interaction

📄 Read: references/user-interaction.md

• Undo/redo strokes (undo, redo, canUndo, canRedo)
• Clear the canvas (clear, isEmpty)
• Disabled state (disabled)
• Read-only mode (isReadOnly)
• Draw text as signature (draw)
• Keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)

Toolbar Integration

📄 Read: references/toolbar-integration.md

• Integrating with Syncfusion ToolbarComponent
• Wiring undo, redo, clear, and save toolbar buttons
• Stroke color picker using ColorPickerComponent
• Background color picker integration
• Stroke width dropdown with DropDownListComponent
• Enabling/disabling toolbar buttons based on signature state

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 compliance
• Keyboard interaction (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
• Screen reader and mobile device support

API Reference

📄 Read: references/api.md

• All properties: backgroundColor, backgroundImage, disabled, enablePersistence, isReadOnly, maxStrokeWidth, minStrokeWidth, saveWithBackground, strokeColor, velocity
• All methods: canRedo, canUndo, clear, destroy, draw, getBlob, getSignature, isEmpty, load, redo, refresh, save, saveAsBlob, undo
• Events: beforeSave, change, created

---

Quick Start

npm install @syncfusion/ej2-react-inputs --save
# Then run: npm audit

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";

import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <SignatureComponent id="signature" />
    </div>
  );
}
export default App;

---

Common Patterns

Signature with Undo/Redo/Clear Controls

import { SignatureComponent, SignatureChangeEventArgs } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { useRef } from 'react';

function App() {
  const sigRef = React.useRef<SignatureComponent>(null);
  const [canUndo, setCanUndo] = React.useState(false);
  const [canRedo, setCanRedo] = React.useState(false);
  const [isEmpty, setIsEmpty] = React.useState(true);

  function handleChange(args: SignatureChangeEventArgs) {
    if (sigRef.current) {
      setCanUndo(sigRef.current.canUndo());
      setCanRedo(sigRef.current.canRedo());
      setIsEmpty(sigRef.current.isEmpty());
    }
  }

  return (
    <div>
      <ButtonComponent disabled={!canUndo} onClick={() => sigRef.current?.undo()}>Undo</ButtonComponent>
      <ButtonComponent disabled={!canRedo} onClick={() => sigRef.current?.redo()}>Redo</ButtonComponent>
      <ButtonComponent disabled={isEmpty} onClick={() => sigRef.current?.clear()}>Clear</ButtonComponent>
      <SignatureComponent id="signature" ref={sigRef} change={handleChange} />
    </div>
  );
}
export default App;

Save Signature as PNG

import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  const sigRef = React.useRef<SignatureComponent>(null);

  function saveSignature() {
    sigRef.current?.save('Png', 'MySignature');
  }

  return (
    <div>
      <SignatureComponent id="signature" ref={sigRef} />
      <ButtonComponent onClick={saveSignature}>Save as PNG</ButtonComponent>
    </div>
  );
}
export default App;

---

Key Props at a Glance

Prop	Type	Default	Purpose
strokeColor	string	'#000000'	Pen/stroke color (hex, rgb, or name)
backgroundColor	string	''	Canvas background color
backgroundImage	string	''	Canvas background image URL
maxStrokeWidth	number	2	Maximum stroke thickness
minStrokeWidth	number	0.5	Minimum stroke thickness
velocity	number	0.7	Controls stroke width variation
disabled	boolean	false	Disables the component
isReadOnly	boolean	false	Prevents drawing, allows focus
saveWithBackground	boolean	true	Include background when saving
enablePersistence	boolean	false	Persist state across page reloads ⚠️ Stores signature data (biometric input) in browser storage — enable only with explicit user consent and applicable privacy disclosures

---

OTP Input

A focused input component for collecting one-time passwords, PINs, and verification codes. Renders a configurable number of individual character input fields with full keyboard navigation, accessibility support, and visual styling modes.

Quick Start

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div id="container">
      <OtpInputComponent id="otpinput" />
    </div>
  );
}

export default App;

CSS (src/App.css):

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";

Install:

npm install @syncfusion/ej2-react-inputs --save

Common Patterns

6-digit OTP with verification callback

import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  const handleValueChanged = (args: OtpChangedEventArgs) => {
    console.log('Complete OTP:', args.value);
    // Call your API verification here
  };

  return (
    <OtpInputComponent
      id="otpinput"
      length={6}
      autoFocus={true}
      valueChanged={handleValueChanged}
    />
  );
}

Password-masked OTP with error state

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <OtpInputComponent
      id="otpinput"
      type="password"
      length={6}
      cssClass="e-error"
      placeholder="*"
    />
  );
}

Alphanumeric OTP with separator

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <OtpInputComponent
      id="otpinput"
      type="text"
      length={6}
      separator="-"
      textTransform="uppercase"
      stylingMode="filled"
    />
  );
}

Key Properties

Property	Type	Default	Purpose
length	number	4	Number of OTP input fields
value	string | number	''	Current OTP value
type	'number' | 'text' | 'password'	'number'	Input character type
stylingMode	'outlined' | 'filled' | 'underlined'	'outlined'	Visual style variant
placeholder	string	''	Hint character(s) per field
separator	string	''	Character between fields
cssClass	string	''	Custom/predefined CSS class (e-success, e-warning, e-error)
disabled	boolean	false	Disables user input
autoFocus	boolean	false	Auto-focuses on render
enableRtl	boolean	false	Right-to-left layout
textTransform	'none' | 'uppercase' | 'lowercase'	'none'	Case transformation
ariaLabels	string[]	[]	Per-field ARIA labels
htmlAttributes	{ [key: string]: string }	{}	Extra HTML attributes

Navigation Guide

Installation, Setup & Basic Usage

📄 Read: references/getting-started.md

• npm install and Vite project setup
• CSS theme imports
• Minimal working example
• Setting OTP length
• Setting a default value
• Auto-focus on load
• Troubleshooting

Input Types, Styling & Visual Configuration

📄 Read: references/configuration.md

• Input types: number, text, password
• Styling modes: outlined, filled, underlined
• Placeholder text (single/per-field)
• Separator characters
• Disabled state
• CSS class customization (e-success, e-warning, e-error)
• RTL support
• Text transform (uppercase/lowercase)
• State persistence

Events & Interaction Handling

📄 Read: references/events.md

• created event (post-render init)
• focus and blur events with OtpFocusEventArgs
• input event for real-time tracking with OtpInputEventArgs
• valueChanged event for OTP submission with OtpChangedEventArgs
• Programmatic focus via focusIn() / focusOut() methods
• Patterns: conditional submit button, verification feedback

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508 compliance
• WAI-ARIA roles and attributes
• Keyboard navigation shortcuts
• Per-field ariaLabels configuration
• htmlAttributes for custom accessibility metadata
• RTL support
• Axe-core and accessibility-checker validation

Full API Reference

📄 Read: references/api.md

• All properties with types, defaults, and examples
• Methods: destroy(), focusIn(), focusOut()
• All events and their argument interfaces
• Type enumerations: OtpInputType, OtpInputStyle, TextTransform
• Event argument interfaces: OtpFocusEventArgs, OtpInputEventArgs, OtpChangedEventArgs

Decision Guide

Which type to use?

• User enters digits only → type="number" (default)
• User enters letters + digits → type="text"
• Input should be hidden/masked → type="password"

Which event to use?

• Trigger verification when OTP is fully entered → valueChanged
• Track partial input in real time → input
• Know when user clicks into/out of a field → focus / blur

Which styling mode?

• Standard forms → outlined (default)
• Card/dashboard UI → filled
• Material Design forms → underlined

Visual feedback after verification?

• Correct OTP → set cssClass="e-success"
• Wrong OTP → set cssClass="e-error"
• Pending/caution → set cssClass="e-warning"

TextArea

The TextArea component enables efficient collection of multiline text input in forms and applications. It provides essential features for user feedback, comments, descriptions, and any scenario requiring extended text input.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and npm setup
• Vite/React project configuration
• Basic TextArea implementation
• CSS imports and theming
• Getting and setting values with properties, state, and events

Core Features & Content

📄 Read: references/value-and-content.md

• Setting initial values with property and state
• Getting current value from textarea
• Value binding patterns
• Change detection and state management

Floating Labels & Placeholders

📄 Read: references/floating-label.md

• Floating label types (Auto, Always, Never)
• Placeholder behavior during user interaction
• Localization with floating labels
• Placeholder text translations for different cultures

Adornments (Custom Elements)

📄 Read: references/adornments.md

• Adding icons, buttons, or text before/after textarea
• Prepend and append templates
• Adornment flow and orientation (horizontal/vertical)
• Common use cases: character count, formatting tools, validation icons

Form Integration

📄 Read: references/form-support.md

• HTML form submission with textarea
• Name attribute and form data
• FormValidator integration for validation rules
• Required fields, min/max length constraints
• Validation messaging and error states

Content Constraints

📄 Read: references/max-length.md

• Enforcing character limits with maxLength
• Preventing user input beyond limit
• User feedback on character restrictions
• Edge cases and best practices

Sizing & Dimensions

📄 Read: references/rows-columns-sizing.md

• Setting visible height with rows property
• Setting visible width with cols property
• Responsive sizing strategies
• Controlling textarea dimensions

Resize Behavior

📄 Read: references/resize.md

• Resize modes: Vertical, Horizontal, Both, None
• User-controlled resizing
• Width customization
• Layout considerations for fixed-size textareas

Styling & Appearance

📄 Read: references/styling-appearance.md

• Size classes (e-small, e-bigger)
• Filled and outline appearance modes
• Custom CSS with cssClass property
• Disabled and read-only states
• Validation state styling (success, warning, error)
• Clear button configuration
• Color customization and rounded corners

Events & User Interaction

📄 Read: references/events.md

• created: Initialization event
• input: Real-time value change detection
• change: Value change with focus-out
• focus: Focus gained
• blur: Focus lost
• destroyed: Component cleanup
• Event args and usage patterns

Methods & Programmatic Control

📄 Read: references/methods.md

• focusIn(): Programmatically set focus
• focusOut(): Remove focus
• getPersistData(): Retrieve persistence state
• addAttributes(): Add HTML attributes dynamically
• removeAttributes(): Remove HTML attributes
• destroy(): Clean up component

Complete API Reference

📄 Read: references/api.md

• All properties with descriptions and defaults
• All methods with parameters and return types
• All events with arg types
• Type definitions and enums
• Usage examples for each API

Quick Start

import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  const [textValue, setTextValue] = React.useState('');

  const handleChange = (args) => {
    console.log('TextArea value changed:', args.value);
  };

  return (
    <div className='wrap'>
      <TextAreaComponent
        id='default'
        placeholder='Enter your comments'
        value={textValue}
        change={handleChange}
        floatLabelType='Auto'
        rows={5}
        cols={40}
      />
    </div>
  );
}

export default App;

Common Patterns

Pattern 1: Form with Validation

<TextAreaComponent
  name='comments'
  placeholder='Your feedback'
  floatLabelType='Auto'
  required={true}
  maxLength={500}
  showClearButton={true}
/>

Pattern 2: Controlled Component with State

const [value, setValue] = React.useState('');

<TextAreaComponent
  value={value}
  input={(args) => setValue(args.value)}
/>

Pattern 3: Styled with Custom CSS

<TextAreaComponent
  placeholder='Enter text'
  cssClass='e-outline e-small'
  floatLabelType='Auto'
/>

Pattern 4: Disabled & Read-Only States

<TextAreaComponent placeholder='Disabled' enabled={false} />
<TextAreaComponent placeholder='Read-only' readonly={true} />

Pattern 5: With Adornments

<TextAreaComponent
  placeholder='Message'
  prependTemplate={() => <span className='icon'>📝</span>}
  appendTemplate={() => <button>Send</button>}
/>

Key Props Summary

Prop	Purpose	Common Values
value	Set/get textarea content	string
placeholder	Hint text	string
rows	Visible height in lines	3-10
cols	Visible width in characters	30-80
floatLabelType	Floating behavior	'Auto', 'Always', 'Never'
maxLength	Character limit	number
resizeMode	User resizing	'Both', 'Vertical', 'Horizontal', 'None'
enabled	Enable/disable input	boolean
readonly	Read-only mode	boolean
cssClass	Custom styling	'e-outline', 'e-small', 'e-filled'
showClearButton	Display clear button	boolean

Syncfusion React Slider (RangeSlider)

A comprehensive guide for implementing the Syncfusion Essential JS 2 SliderComponent in React applications. Supports single-value (Default), min-range fill (MinRange), and dual-handle range selection (Range) with tooltips, ticks, limits, color ranges, custom values, formatting, accessibility, events, and more.

Package: @syncfusion/ej2-react-inputs

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Basic implementation of three slider types
• CSS imports and theme setup
• Minimal working example
• Initial configuration

Types and Orientation

📄 Read: references/types-and-orientation.md

• Three slider types: Default, MinRange, Range
• Understanding shadow/fill behavior
• Horizontal vs vertical orientation
• Type selection guide
• Code examples for each type

Tooltips and Ticks

📄 Read: references/tooltips-and-ticks.md

• Tooltip configuration and placement
• Tooltip visibility modes (Always, Focus, Click)
• Tick marks and scale display
• largeStep and smallStep configuration
• Small tick visibility
• Combined tooltip + ticks examples

Formatting and Limits

📄 Read: references/formatting-and-limits.md

• Value formatting (currency, percentages, custom formats)
• Using the format API
• Slider limits and restricted ranges
• Handle locking (start/end fixed)
• Min/max bounds per handle
• Edge cases and constraint handling

Styling and Customization

📄 Read: references/styling.md

• CSS selectors for track, handle, limits, ticks, buttons
• Customizing track color and height
• Handle styling (color, border, size)
• Theme integration and built-in themes
• CSS variable customization
• Advanced styling patterns

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA attributes and roles (role="slider", aria-valuemin, aria-valuemax, aria-valuenow, aria-orientation)
• Keyboard navigation (Arrow keys, Home, End, Page Up/Down)
• Screen reader support and aria-live regions
• Focus management and color contrast requirements
• Mobile touch accessibility

Color Range

📄 Read: references/color-range.md

• colorRange property and ColorRangeDataModel interface
• Three-zone and multi-zone patterns (red/amber/green)
• Color range with Range type (dual handles)
• Dynamic color zones based on runtime data
• Real-world: battery, risk, performance, score patterns
• Combining colorRange with limits, ticks, and tooltip

Events and Methods

📄 Read: references/events-and-methods.md

• change event — continuous value updates while dragging
• changed event — final committed value on drag release
• created event — post-render initialization
• renderingTicks — customize tick label text per tick
• renderedTicks — post-process tick DOM after all ticks render
• tooltipChange — customize tooltip display text
• reposition() method — when and how to call
• destroy() method — cleanup and removal
• React ref patterns for programmatic control
• Common patterns: API sync, conditional logic, live preview

API Reference

📄 Read: references/api-reference.md

• All official SliderComponent properties: value, type, min, max, step, orientation, ticks, tooltip, limits, colorRange, customValues, showButtons, enableAnimation, enabled, readonly, cssClass, width, enableRtl, enablePersistence, enableHtmlSanitizer, locale
• Official methods: reposition(), destroy()
• All official events with correct argument interfaces: change, changed, created, renderingTicks, renderedTicks, tooltipChange
• Interface: TicksDataModel — placement ('Before'/'After'/'Both'/'None'), largeStep, smallStep, showSmallTicks, format
• Interface: TooltipDataModel — isVisible, placement, showOn ('Always'/'Focus'/'Click'), format, cssClass
• Interface: LimitDataModel — enabled, minStart, minEnd, maxStart, maxEnd, startHandleFixed, endHandleFixed
• Interface: ColorRangeDataModel — color, start, end
• Interface: SliderChangeEventArgs — value, previousValue, action, isInteracted, text
• Interface: SliderTickEventArgs — value, text, tickElement
• Interface: SliderTickRenderedEventArgs — ticksWrapper, tickElements
• Interface: SliderTooltipEventArgs — value, text
• Enum: SliderType ('Default' | 'MinRange' | 'Range')
• Enum: SliderOrientation ('Horizontal' | 'Vertical')

Quick Start

Basic Single Value Slider

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  return (
    <div>
      <SliderComponent 
        id="slider" 
        value={30}
        min={0}
        max={100}
      />
    </div>
  );
}
export default App;

Range Slider (Two Handles)

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  const [range, setRange] = React.useState([30, 70]);

  return (
    <div>
      <SliderComponent 
        id="range-slider" 
        type="Range"
        value={range}
        change={(e) => setRange(e.value)}
        min={0}
        max={100}
      />
    </div>
  );
}
export default App;

Price Range Selector

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function PriceRangeSelector() {
  const [priceRange, setPriceRange] = React.useState([100, 500]);
  
  const tooltip = {
    placement: 'Before',
    isVisible: true,
    format: 'C2'  // Currency format
  };

  return (
    <div>
      <h3>Price Range: ${priceRange[0]} - ${priceRange[1]}</h3>
      <SliderComponent 
        id="price-slider"
        type="Range"
        value={priceRange}
        change={(e) => setPriceRange(e.value)}
        min={0}
        max={1000}
        step={10}
        tooltip={tooltip}
      />
    </div>
  );
}
export default PriceRangeSelector;

Common Patterns

Pattern 1: Single Value with Ticks

Use Default type for simple numeric selection with visual scale.

<SliderComponent
  id="default-slider"
  value={40}
  min={0}
  max={100}
  step={5}
  ticks={{
    placement: 'After',
    largeStep: 20,
    smallStep: 5,
    showSmallTicks: true
  }}
/>

Pattern 2: Range with Fixed Limits

Use Range type with limits to restrict handle movement to specific areas.

<SliderComponent
  id="limited-range"
  type="Range"
  value={[25, 75]}
  limits={{
    enabled: true,
    minStart: 10,
    minEnd: 40,
    maxStart: 60,
    maxEnd: 90
  }}
  tooltip={{ isVisible: true }}
/>

Pattern 3: Formatted Values (Currency)

Display values as currency using format API.

<SliderComponent
  id="currency-slider"
  type="Range"
  value={[1000, 5000]}
  min={0}
  max={10000}
  step={100}
  tooltip={{
    isVisible: true,
    format: 'C0'  // Currency without decimals
  }}
  ticks={{
    placement: 'After',
    largeStep: 2000,
    format: 'C0'
  }}
/>

Pattern 4: Vertical Orientation

Display slider vertically for space-constrained layouts.

<div style={{ height: '300px', width: '100px' }}>
  <SliderComponent
    id="vertical-slider"
    value={50}
    orientation="Vertical"
    tooltip={{ isVisible: true }}
  />
</div>

Pattern 5: With Increment/Decrement Buttons

Add buttons to manually adjust slider values.

<SliderComponent
  id="button-slider"
  type="Range"
  value={[30, 70]}
  showButtons={true}
  tooltip={{ isVisible: true }}
/>

Pattern 6: Color Range (Zones)

Paint distinct color sections on the slider track using colorRange.

import { ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';

const colorRange: ColorRangeDataModel[] = [
  { color: '#ff4040', start: 0,  end: 33  },   // Low zone — red
  { color: '#ffb300', start: 34, end: 66  },   // Mid zone — amber
  { color: '#00c853', start: 67, end: 100 }    // High zone — green
];

<SliderComponent
  id="color-slider"
  type="MinRange"
  value={50}
  colorRange={colorRange}
  tooltip={{ isVisible: true, showOn: 'Always' }}
/>

Pattern 7: Custom Value Scale

Use non-numeric labels as slider values with customValues.

<SliderComponent
  id="size-slider"
  customValues={['XS', 'S', 'M', 'L', 'XL', 'XXL']}
  value="M"
  tooltip={{ isVisible: true }}
/>

Pattern 8: Read-Only Display

Show a locked slider for informational display.

<SliderComponent
  id="status-slider"
  type="MinRange"
  value={65}
  min={0}
  max={100}
  readonly={true}
  tooltip={{ isVisible: true, showOn: 'Always' }}
  ticks={{ placement: 'After', largeStep: 20 }}
/>

Key Properties

Property	Type	Default	Purpose
value	number | number[]	null	Single value or [start, end] array for Range type
type	'Default' | 'MinRange' | 'Range'	'Default'	Slider mode
min	number	0	Minimum selectable value
max	number	100	Maximum selectable value
step	number	1	Value increment/decrement per step
orientation	'Horizontal' | 'Vertical'	'Horizontal'	Slider direction
tooltip	TooltipDataModel	{ isVisible: false }	Tooltip configuration
ticks	TicksDataModel	{ placement: 'before' }	Tick marks configuration
limits	LimitDataModel	{ enabled: false }	Thumb movement restrictions
colorRange	ColorRangeDataModel[]	[]	Color zones on the track
customValues	string[] | number[]	null	Custom value scale (ignores min/max/step)
showButtons	boolean	false	Show +/- increment/decrement buttons
enabled	boolean	true	Enable or disable the slider
readonly	boolean	false	Read-only display mode
enableRtl	boolean	false	Right-to-left layout
width	number | string	null	Slider element width
cssClass	string	''	Custom CSS classes on root element

Type Comparison

Type	Handles	Fill Behavior	Use Case
Default	1	No fill	Simple numeric selection
MinRange	1	Fill from min	Visual progress/level indicator
Range	2	Fill between handles	Min/max range selection

Common Use Cases

Budget Range Selector

Select min and max budget with step increments and currency formatting. → Use type="Range", step={50}, format 'C0', tooltip enabled

Time Range Picker

Select time window (hours, minutes, days). → Use type="Range", custom formatting via renderingTicks event

Volume/Brightness Control

Single handle adjustment with immediate feedback. → Use type="Default", no ticks, always-visible tooltip

Score/Rating Range

MinRange mode with shadow showing current level. → Use type="MinRange", min={0}, max={10}, step-based

Product Filter

Multiple product categories with price ranges. → Use type="Range", limits for each category, event handlers

Events

Event	Trigger	Usage
created	Component created and rendered	One-time setup operations
change	Value changing while dragging	Real-time feedback (continuous)
changed	Drag complete (thumb released)	Capture final committed value
tooltipChange	Tooltip about to render	Custom tooltip text formatting
renderingTicks	Each tick being rendered	Custom tick label text
renderedTicks	All ticks rendered	Post-process tick DOM elements

⚠️ Note: The official event for continuous updates while dragging is change, not changing. The event fired after drag completes is changed. Do NOT use onChange prop (that is a React native input prop). Use change and changed directly.

Troubleshooting Quick Links

Component not displaying? → Check CSS imports and theme in getting-started.md

Values not updating? → Use change (continuous) or changed (on release) events — NOT onChange

Formatting not working? → See format API examples in formatting-and-limits.md

Accessibility issues? → Refer to accessibility.md for ARIA and keyboard support

Vertical slider not rendering? → Wrap in a container with explicit height (e.g., style={{ height: '300px' }})

Range type with single value? → Always pass value={[start, end]} array for type="Range"

Color zones not showing? → Check colorRange array has valid start/end/color properties

Next Steps

1. Choose your slider type based on use case (Default, MinRange, or Range)
2. Read getting-started.md for installation
3. Navigate to specific reference for your feature needs
4. Test with examples from reference files
5. Customize styling using styling.md
6. Ensure accessibility following accessibility.md
7. Verify all API usage against api-reference.md

⚠️ Critical: Only use APIs explicitly listed in references/api-reference.md. Do not reference onChange (use change/changed), toggle(), open(), close(), or any undocumented methods.