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

tsx

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

tsx

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

Manual Upload with Custom Buttons

tsx

<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

tsx

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

jsx

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

jsx

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

2. Percentage Input

jsx

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

3. Integer-Only Input

jsx

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

4. Bounded Range with Validation

jsx

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

5. Form Field with Label

jsx

<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

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.
Getting Started reference: For installation details and basic setup, see references/getting-started.md.
Choose your reference: Based on your use case (formatting, validation, forms, etc.), navigate to the relevant reference section above.
Review examples: Each reference contains ready-to-use code samples that can be adapted to your requirements.
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

tsx

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

tsx

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

tsx

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

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

Multiline TextBox

tsx

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

tsx

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

tsx

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

tsx

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

tsx

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

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

Disabled TextBox

tsx

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

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

RTL TextBox

tsx

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

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

Auto-sizing Multiline TextBox

tsx

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

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

bash

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

css

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

tsx

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

tsx

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

tsx

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

tsx

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

bash

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

css

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

tsx

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

tsx

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

tsx

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

tsx

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

css

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

Install:

bash

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

Common Patterns

6-digit OTP with verification callback

tsx

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

tsx

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

tsx

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

typescript

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

typescript

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

Pattern 2: Controlled Component with State

typescript

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

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

Pattern 3: Styled with Custom CSS

typescript

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

Pattern 4: Disabled & Read-Only States

typescript

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

Pattern 5: With Adornments

typescript

<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

tsx

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)

tsx

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

tsx

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.

tsx

<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.

tsx

<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.

tsx

<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.

tsx

<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.

tsx

<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

tsx

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

tsx

<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.

tsx

<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

Choose your slider type based on use case (
```
Default
```
,
```
MinRange
```
, or
```
Range
```
)
Read getting-started.md for installation
Navigate to specific reference for your feature needs
Test with examples from reference files
Customize styling using styling.md
Ensure accessibility following accessibility.md
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.

syncfusion-react-inputs

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion React Inputs

Uploader

Navigation Guide

Getting Started

Asynchronous Upload

Chunk Upload

Validation

File Sources

Templates and Customization

Advanced How-To Scenarios

API Reference

Quick Start Example

Common Patterns

Auto Upload with Validation

Manual Upload with Custom Buttons

Chunk Upload for Large Files

Key Decision Guide

NumericTextBox

Documentation & Navigation Guide

Getting Started

Formats & Validation

Spin Buttons & Step Control

Adornments & Styling

Precision & Decimals

Two-Way Binding & Forms

Globalization & Accessibility

API Reference

Quick Start Example

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

Common Use Cases

Next Steps

TextBox

Navigation Guide

Getting Started

Features and Groups

Styling and Sizing

Multiline TextBox

Validation and States

Advanced Features

Accessibility and Migration

API Reference

Quick Start

Basic TextBox with Floating Label

TextBox with Icon

TextBox with Clear Button

Multiline TextBox

Common Patterns

Form with Validation States

Password TextBox with Toggle

Email Input with Unit Label

Rounded Corner TextBox

Disabled TextBox

RTL TextBox

Auto-sizing Multiline TextBox

Key Properties

Key Events

Related Documentation

CheckBox

Navigation Guide

Getting Started

States (Checked, Unchecked, Indeterminate, Disabled)

Label and Size

Style and Appearance

Accessibility and RTL

How-To Guides

API Reference

Quick Start

Common Patterns

Controlled Checkbox with Change Handler

Parent / Children with Indeterminate State