Syncfusion React Inputs

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

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

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

Key Events

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

---

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

---

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

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

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

Type Comparison

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

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

ColorPicker

The Syncfusion React ColorPicker lets users pick colors via a visual picker (HSV + opacity) or a palette of swatches. It renders as a SplitButton by default (opens a popup) or inline, and supports RGB, HSV, and Hex color formats.

Package: @syncfusion/ej2-react-inputs Component: <ColorPickerComponent>

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation with Vite or Create React App
• npm package setup
• CSS theme imports
• Minimal working example
• Running the application

Modes and Color Value

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

• Inline rendering vs popup (SplitButton)
• Picker mode vs Palette mode
• Setting initial color value (hex codes)
• Opacity support
• Rendering palette alone (locking mode)

Palette Features

📄 Read: references/palette-features.md

• Custom color palettes (presetColors)
• Custom palette tile rendering (beforeTileRender)
• No-color / clear color support (noColor)
• Custom no-color option
• Recent colors display (showRecentColors)
• Palette column count (columns)

UI Customization

📄 Read: references/ui-customization.md

• Hide the input value area
• Custom picker handle
• Custom primary button with icon
• Display hex code in input element
• Hide control buttons (Apply/Cancel)
• CSS class overrides and Theme Studio
• Excel-like custom UI with SplitButton and Dialog

Integration and Advanced

📄 Read: references/integration-and-advanced.md

• Embedding ColorPicker in a DropDownButton
• Popup toggle control
• State persistence across page reloads
• Mode switcher visibility and events
• Disabled state

Localization and RTL

📄 Read: references/localization-and-rtl.md

• Localizing Apply / Cancel / ModeSwitcher labels
• Loading translation objects with L10n
• Right-to-left rendering (enableRtl)

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes
• Keyboard navigation shortcuts
• Accessibility validation

API Reference

📄 Read: references/api.md

• All properties with types and defaults
• All methods with signatures
• All events with payload types

---

Quick Start

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

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

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

function App() {
  return (
    <div id="container">
      <div className="wrap">
        <h4>Choose Color</h4>
        <ColorPickerComponent id="color-picker" />
      </div>
    </div>
  );
}
export default App;

---

Common Patterns

Inline picker (no popup)

<ColorPickerComponent inline={true} showButtons={false} />

Palette-only mode

<ColorPickerComponent mode="Palette" modeSwitcher={false} showButtons={false} />

Set initial color + handle changes

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

function App() {
  function onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
  return <ColorPickerComponent value="#ff5733" change={onChange} />;
}

Custom palette with preset colors

const presets: { [key: string]: string[] } = {
  'brand': ['#0078d4', '#106ebe', '#005a9e', '#004578'],
  'accents': ['#e81123', '#ff8c00', '#00b294', '#68217a']
};

<ColorPickerComponent
  mode="Palette"
  presetColors={presets}
  columns={4}
  modeSwitcher={false}
  inline={true}
  showButtons={false}
/>

Disable opacity slider

<ColorPickerComponent enableOpacity={false} />

No-color support (clear selection)

<ColorPickerComponent
  mode="Palette"
  noColor={true}
  modeSwitcher={false}
  showButtons={false}
/>

Localization (German)

import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'de-DE': {
    'colorpicker': { Apply: 'Anwenden', Cancel: 'Abbrechen', ModeSwitcher: 'Modus wechseln' }
  }
});

<ColorPickerComponent locale="de-DE" />

---

Key Props

MaskedTextBox

The Syncfusion React MaskedTextBox component enforces a specific input format by applying a mask pattern, guiding users to enter data in the correct structure. It is ideal for phone numbers, postal codes, dates, IP addresses, product keys, and any scenario where input must follow a predefined format.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation via npm (@syncfusion/ej2-react-inputs)
• Vite / Create-React-App setup
• CSS imports for theming
• Rendering a basic MaskedTextBox
• Setting the mask property for format enforcement

Mask Configuration

📄 Read: references/mask-configuration.md

• Standard mask element tokens (0, 9, #, L, ?, &, C, A, a, <, >, |, \)
• Custom characters via customCharacters property
• Regular expression masks for flexible patterns (e.g., IP addresses)
• Prompt character customization via promptChar

Adornments (Prepend / Append Elements)

📄 Read: references/adornments.md

• Adding icons or buttons before/after the input with prependTemplate and appendTemplate
• Entry guidance, quick actions, and context labels
• Class and functional component examples

React Hooks Integration

📄 Read: references/react-hooks.md

• Controlled component with useState
• Auto-focus on mount using useEffect + useRef + focusIn()
• Multiple masked inputs with useReducer
• Handling the change event in functional components

Style, Appearance & Customization

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

• Custom styling with cssClass
• CSS overrides for wrapper, hover, and focus states
• Setting cursor position on focus using the focus event (selectionStart, selectionEnd)
• Displaying numeric keypad on mobile with type="tel"
• floatLabelType options (Never, Always, Auto)

Form Validation

📄 Read: references/form-validation.md

• Integrating with Syncfusion FormValidator
• Defining custom validation rules using ej2_instances
• Custom error placement with customPlacement
• Checking for incomplete masked values using promptChar

API Reference

📄 Read: references/api.md

• All properties: mask, value, placeholder, floatLabelType, promptChar, customCharacters, cssClass, enabled, readonly, showClearButton, enableRtl, enablePersistence, htmlAttributes, locale, width, prependTemplate, appendTemplate
• Methods: focusIn(), focusOut(), getMaskedValue(), destroy(), getPersistData()
• Events: change, focus, blur, created, destroyed

Quick Start

import * as React from 'react';
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
import '../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css';

export default function App() {
  return (
    <MaskedTextBoxComponent
      mask="000-000-0000"
      placeholder="Enter phone number"
      floatLabelType="Auto"
    />
  );
}

Common Patterns

Phone Number Input

<MaskedTextBoxComponent mask="000-000-0000" placeholder="Phone" floatLabelType="Always" />

IP Address with Regex Mask

<MaskedTextBoxComponent
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always"
/>

Custom AM/PM Time Input

const chars = { P: 'P,A,p,a', M: 'M,m' };
<MaskedTextBoxComponent
  mask="00:00 >PM"
  customCharacters={chars}
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always"
/>

Read Masked Value Programmatically

const maskRef = React.useRef(null);
// Later:
const maskedVal = maskRef.current.getMaskedValue(); // e.g., "123-456-7890"
const rawVal = maskRef.current.value;               // e.g., "1234567890"

Controlled Input with Change Event

const [phone, setPhone] = React.useState('');
<MaskedTextBoxComponent
  mask="000-000-0000"
  value={phone}
  change={(e) => setPhone(e.value)}
  placeholder="Phone"
  floatLabelType="Auto"
/>

Rating

The Syncfusion React RatingComponent lets users select a rating value from a set of visual symbols (stars by default). It supports precision modes, custom templates, tooltips, labels, reset, read-only/disabled states, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-react-inputs

---

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing @syncfusion/ej2-react-inputs
• CSS theme imports for Tailwind3
• Minimal RatingComponent setup
• Setting the initial value property
• Running the Vite/React app

Selection and Reset

📄 Read: references/selection.md

• Setting a rating value with value
• Minimum rating value with min
• Single-selection mode with enableSingleSelection
• Show/hide reset button with allowReset
• Programmatic reset() method

Precision Modes

📄 Read: references/precision-modes.md

• PrecisionType.Full — whole number increments
• PrecisionType.Half — 0.5 increments
• PrecisionType.Quarter — 0.25 increments
• PrecisionType.Exact — 0.1 increments
• Combining precision with initial value

Appearance and Customization

📄 Read: references/appearance.md

• Controlling item count with itemsCount
• Disabling the component with disabled
• Hiding/showing the component with visible
• Read-only mode with readOnly
• CSS customization with cssClass (border color, fill color, item spacing, icon)
• Changing rating icon via CSS

Labels

📄 Read: references/labels.md

• Showing the current value label with showLabel
• labelPosition options: Top, Bottom, Left, Right
• Custom label content with labelTemplate

Tooltip

📄 Read: references/tooltip.md

• Enabling tooltips with showTooltip
• Custom tooltip content with tooltipTemplate
• Tooltip appearance via cssClass

Templates

📄 Read: references/templates.md

• emptyTemplate for unrated items
• fullTemplate for rated items
• Emoji rating symbols
• SVG icon rating symbols
• PNG image rating symbols
• Precision support in templates via --rating-value

Events

📄 Read: references/events.md

• beforeItemRender — customize items before render
• created — after component initialization
• onItemHover — track hovered items
• valueChanged — react to user rating changes

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 / ADA compliance
• WAI-ARIA attributes (role=slider, aria-valuemin/max/now)
• Keyboard navigation shortcuts
• RTL support with enableRtl
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties, methods, and events with types and defaults
• RatingItemEventArgs, RatingHoverEventArgs, RatingChangedEventArgs
• LabelPosition and PrecisionType enums

---

Quick Start

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

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

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

function App() {
  return (
    <RatingComponent id="rating" value={3} />
  );
}
export default App;

---

Common Patterns

Rating with value change handler

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

function App() {
  const [rating, setRating] = React.useState(3);

  const handleValueChanged = (args: RatingChangedEventArgs) => {
    setRating(args.value);
  };

  return (
    <RatingComponent
      id="rating"
      value={rating}
      valueChanged={handleValueChanged}
    />
  );
}
export default App;

Half-precision rating with label

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

function App() {
  return (
    <RatingComponent
      id="rating"
      value={3.5}
      precision={PrecisionType.Half}
      showLabel={true}
    />
  );
}
export default App;

Read-only rating (display only)

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

function App() {
  return (
    <RatingComponent id="rating" value={4} readOnly={true} showTooltip={false} />
  );
}
export default App;

Rating with reset button

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

function App() {
  return (
    <RatingComponent id="rating" value={3} allowReset={true} />
  );
}
export default App;

---

Key Props at a Glance

---

Accessibility — Syncfusion React CheckBox

Table of Contents

• Compliance Overview
• WAI-ARIA Attributes
• Keyboard Interaction
• Right-to-Left (RTL) Support
• Ensuring Accessibility in Your App

---

Compliance Overview

The Syncfusion React CheckBox component is built to meet major accessibility standards:

The component follows WAI-ARIA CheckBox patterns.

---

WAI-ARIA Attributes

The CheckBox renders as a native <input type="checkbox"> element, which provides built-in role="checkbox" semantics for screen readers. No additional ARIA role configuration is needed.

---

Keyboard Interaction

The CheckBox follows the WAI-ARIA keyboard interaction guidelines:

The checkbox receives focus via standard Tab navigation. Focus indicators are visible and meet WCAG contrast requirements.

---

Right-to-Left (RTL) Support

Enable RTL rendering for languages using right-to-left scripts (Arabic, Hebrew, etc.) by setting enableRtl={true}:

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Default RTL" enableRtl={true} /></li>
      <li><CheckBoxComponent label="Checked RTL" checked={true} enableRtl={true} /></li>
    </ul>
  );
}
export default App;

When enableRtl={true}:

• The checkbox frame and label flip to right-to-left orientation
• Works in combination with labelPosition for full layout control

Property: enableRtl — boolean, defaults to false

---

State Persistence

Use enablePersistence={true} to save and restore the checkbox state across page reloads (stored in localStorage):

<CheckBoxComponent
  label="Remember my preference"
  enablePersistence={true}
/>

Property: enablePersistence — boolean, defaults to false

---

Locale

Override the global locale for this component using the locale property:

<CheckBoxComponent label="Option" locale="fr-FR" />

Property: locale — string, defaults to '' (inherits global culture 'en-US')

---

Ensuring Accessibility in Your App

• Always provide a meaningful label — avoid rendering checkboxes without descriptive text
• Use disabled={true} instead of hiding checkboxes to communicate non-availability to assistive technologies
• Test with keyboard-only navigation to confirm focus and toggle behavior
• Run accessibility audits using tools like axe-core or accessibility-checker
• For indeterminate state, communicate the meaning in surrounding UI (e.g., "Some items selected")

API Reference — Syncfusion React CheckBox

Full API reference for CheckBoxComponent from @syncfusion/ej2-react-buttons.

Source: Official API Documentation

Table of Contents

• Import
• Properties
• Methods
• Events
• ChangeEventArgs Interface

---

Import

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

---

Properties

checked

Type: boolean | Default: false

Specifies whether the CheckBox is in the checked state. When true, a checkmark is displayed in the checkbox frame.

<CheckBoxComponent label="Option" checked={true} />

---

cssClass

Type: string | Default: ''

Defines one or more CSS class names (space-separated) applied to the CheckBox element. Use this to add custom styles or size variants.

<CheckBoxComponent label="Small" cssClass="e-small" />
<CheckBoxComponent label="Custom" cssClass="e-primary e-small" />

Common built-in values: 'e-small' (small size)

---

disabled

Type: boolean | Default: false

Specifies whether the CheckBox is in the disabled state. When true, the checkbox is non-interactive and visually dimmed. Disabled checkboxes are not included in form submissions.

<CheckBoxComponent label="Disabled" disabled={true} />

---

enableHtmlSanitizer

Type: boolean | Default: true

Specifies whether to sanitize untrusted HTML strings before rendering them in the CheckBox (e.g., in the label property). When true, suspected scripts and unsafe HTML are sanitized. Set to false only for trusted, controlled content.

<CheckBoxComponent label="<b>Bold</b>" enableHtmlSanitizer={false} />

---

enablePersistence

Type: boolean | Default: false

Enables persisting the component's state (checked/unchecked) between page reloads using browser localStorage.

<CheckBoxComponent label="Remember Me" enablePersistence={true} />

---

enableRtl

Type: boolean | Default: false

Enables right-to-left rendering of the CheckBox component. When true, the layout mirrors for RTL locales (Arabic, Hebrew, etc.).

<CheckBoxComponent label="خيار" enableRtl={true} />

---

htmlAttributes

Type: { [key: string]: string } | Default: {}

Adds additional HTML attributes to the underlying <input> element. If the same attribute is set both via htmlAttributes and a direct property, the property value takes precedence.

<CheckBoxComponent
  label="Required field"
  htmlAttributes={{ required: 'required', 'data-id': 'cb-1' }}
/>

---

indeterminate

Type: boolean | Default: false

Specifies whether the CheckBox is in the indeterminate state. When true, neither fully checked nor unchecked — visually shows a dash. Used for parent checkboxes in hierarchical selections. Cannot be set by user interaction; must be set programmatically.

<CheckBoxComponent label="Select All" indeterminate={true} />

---

label

Type: string | Default: ''

Defines the caption text displayed next to the CheckBox. Eliminates the need for a separate <label> HTML element.

<CheckBoxComponent label="Accept Terms and Conditions" />

---

labelPosition

Type: 'Before' | 'After' | Default: 'After'

Controls the position of the label relative to the checkbox frame.

• 'After' — Label appears to the right (default)
• 'Before' — Label appears to the left

<CheckBoxComponent label="Label on Left" labelPosition="Before" />

---

locale

Type: string | Default: ''

Overrides the global culture and localization value for this component. When empty, inherits the global culture ('en-US').

<CheckBoxComponent label="Option" locale="fr-FR" />

---

name

Type: string | Default: ''

Defines the name attribute for the checkbox input element. Used to group checkboxes in a form and to reference form data after submission. Only checked (and non-disabled) checkboxes with a name send their value on form submit.

<CheckBoxComponent name="hobbies" value="reading" label="Reading" />

---

value

Type: string | Default: ''

Defines the value attribute for the checkbox input element. This value is submitted with the form when the checkbox is checked.

<CheckBoxComponent name="hobbies" value="reading" label="Reading" checked={true} />

---

Methods

Access methods via a React ref:

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

function App() {
  const checkboxRef = React.useRef<CheckBoxComponent>(null);

  return (
    <CheckBoxComponent
      ref={checkboxRef}
      label="Option"
    />
  );
}

click()

Returns: void

Programmatically triggers a click on the CheckBox element (native method). Toggles the checked state as if the user clicked.

checkboxRef.current?.click();

---

destroy()

Returns: void

Destroys the CheckBox component and cleans up event listeners and DOM modifications.

checkboxRef.current?.destroy();

---

focusIn()

Returns: void

Sets focus to the CheckBox element (native method). Useful for programmatic focus management in forms.

checkboxRef.current?.focusIn();

---

Events

change

Type: EmitType<ChangeEventArgs>

Triggers when the CheckBox state is changed by user interaction (click or Space key). Provides a ChangeEventArgs object.

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

function App() {
  const handleChange = (args: ChangeEventArgs) => {
    console.log('New checked state:', args.checked);
  };

  return (
    <CheckBoxComponent label="Toggle" change={handleChange} />
  );
}
export default App;

---

created

Type: EmitType<Event>

Triggers once the component has finished rendering. Use this for post-render initialization logic.

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

function App() {
  const handleCreated = () => {
    console.log('CheckBox component rendered');
  };

  return (
    <CheckBoxComponent label="Option" created={handleCreated} />
  );
}
export default App;

---

ChangeEventArgs Interface

The change event callback receives a ChangeEventArgs object:

const handleChange = (args: ChangeEventArgs) => {
  if (args.checked) {
    console.log('Checkbox is now checked');
  } else {
    console.log('Checkbox is now unchecked');
  }
};

---

Quick Reference Table

Getting Started — Syncfusion React CheckBox

Set up a React project and render a basic CheckBoxComponent from Syncfusion.

---

Prerequisites

• Node.js installed
• A React project (Vite recommended)

Create a new React app with Vite

# JavaScript
npm create vite@latest my-app -- --template react
cd my-app
npm run dev

# TypeScript
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

---

Install the Package

All Syncfusion EJ2 packages are published on npmjs.com.

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

The --save flag adds the package to dependencies in package.json.

---

Add CSS References

Import the required CSS files in `src/App.css`:

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

Then import App.css in `src/App.tsx` (or App.jsx):

import './App.css';

---

Add CheckBoxComponent

In `src/App.tsx`, import and render the component:

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

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

---

Enable Ripple Effect (Optional)

For a Material-style ripple on click, use enableRipple from @syncfusion/ej2-base:

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

enableRipple(true);

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

---

Run the Application

npm run dev

The browser opens with the rendered CheckBox. The output displays a checkbox with the label "Default".

---

Troubleshooting

• Styles not applying — Verify CSS import paths match your node_modules location.
• Component not found — Ensure @syncfusion/ej2-react-buttons is installed and listed in package.json.
• TypeScript errors — Use .tsx extensions and ensure @types/react is installed.

How-To Guides — Syncfusion React CheckBox

Table of Contents

• Use Name and Value in Form Submission
• Enable Right-to-Left (RTL)
• Create Customized Checkbox Variants
• Color Variants
• Round (Custom Frame) Checkbox
• Custom Check Icon

---

Use Name and Value in Form Submission

The name attribute groups checkboxes in a form. When the form is submitted, only checked checkbox values are sent to the server. Disabled and unchecked checkboxes are excluded from the submission payload.

Retrieve submitted values server-side using the name attribute key.

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

enableRipple(true);

function App() {
  return (
    <form>
      <ul>
        {/* Checked — will be submitted */}
        <li><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true} /></li>

        {/* Checked — will be submitted */}
        <li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true} /></li>

        {/* Disabled — will NOT be submitted */}
        <li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true} /></li>

        {/* Unchecked — will NOT be submitted */}
        <li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball" /></li>

        <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>
  );
}
export default App;

Result: On submit, only Sport=Cricket and Sport=Hockey are sent.

• `name` — string: Groups checkboxes as a form field name
• `value` — string: The value sent for this checkbox when checked

---

Enable Right-to-Left (RTL)

Set enableRtl={true} to flip the CheckBox layout for RTL locales (Arabic, Hebrew, etc.):

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Default RTL Checkbox" enableRtl={true} /></li>
    </ul>
  );
}
export default App;

The checkbox frame and label render in right-to-left order. Combine with labelPosition="Before" for additional control.

---

Create Customized Checkbox Variants

Color Variants

Apply semantic color meanings (primary, success, warning, danger, info) by combining cssClass with custom CSS:

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

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Primary" cssClass="e-primary" checked={true} /></li>
      <li><CheckBoxComponent label="Success" cssClass="e-success" checked={true} /></li>
      <li><CheckBoxComponent label="Info" cssClass="e-info" checked={true} /></li>
      <li><CheckBoxComponent label="Warning" cssClass="e-warning" checked={true} /></li>
      <li><CheckBoxComponent label="Danger" cssClass="e-danger" checked={true} /></li>
    </ul>
  );
}
export default App;

Add corresponding CSS for each variant in your stylesheet — see the Style and Appearance reference for the CSS selector patterns.

---

Round (Custom Frame) Checkbox

Create a circular checkbox frame using border-radius: 100%:

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Buy Groceries" cssClass="e-custom" checked={true} /></li>
      <li><CheckBoxComponent label="Pay Rent" cssClass="e-custom" /></li>
      <li><CheckBoxComponent label="Make Dinner" cssClass="e-custom" /></li>
      <li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-custom" /></li>
    </ul>
  );
}
export default App;

Required CSS:

.e-checkbox-wrapper.e-custom .e-frame {
  border-radius: 100%;
}
.e-checkbox-wrapper.e-custom .e-frame.e-check {
  border-radius: 100%;
  background-color: #007bff;
  border-color: #007bff;
}

---

Custom Check Icon

Replace the default checkmark with a custom icon using a CSS ::before pseudo-element:

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Buy Groceries" cssClass="e-checkicon" checked={true} /></li>
      <li><CheckBoxComponent label="Pay Rent" cssClass="e-checkicon" /></li>
      <li><CheckBoxComponent label="Make Dinner" cssClass="e-checkicon" /></li>
      <li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-checkicon" /></li>
    </ul>
  );
}
export default App;

Required CSS:

.e-checkbox-wrapper.e-checkicon .e-frame.e-check::before {
  content: '\e7ff'; /* Replace with your icon font unicode */
}
.e-checkbox-wrapper.e-checkicon .e-frame.e-check,
.e-checkbox-wrapper.e-checkicon:hover .e-frame.e-check {
  background-color: #7b1fa2;
  border-color: #7b1fa2;
}

---

Tips

• Multiple custom classes can be combined: cssClass="e-small e-custom"
• The name and value props only affect form submission behavior — they do not change visual appearance
• RTL (enableRtl) can be combined with any size or style variant

Label and Size — Syncfusion React CheckBox

Configure the checkbox caption text, label position, and display size.

---

Label

Use the label property to define the caption for the CheckBox. This eliminates the need for separate <label> HTML elements.

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

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

Property: label — string, defaults to ''

---

Label Position

Use the labelPosition property to place the label before or after the checkbox frame.

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

enableRipple(true);

function App() {
  return (
    <ul>
      {/* Label on the left */}
      <li><CheckBoxComponent label="Left Side Label" labelPosition="Before" /></li>

      {/* Label on the right (default) */}
      <li><CheckBoxComponent label="Right Side Label" checked={true} /></li>
    </ul>
  );
}
export default App;

Property: labelPosition — 'Before' | 'After', defaults to 'After'

---

Size

The CheckBox offers two size options:

Use small checkboxes in compact layouts, data tables, or dense form fields.

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

enableRipple(true);

function App() {
  return (
    <ul>
      {/* Small size */}
      <li><CheckBoxComponent label="Small" cssClass="e-small" /></li>

      {/* Default size */}
      <li><CheckBoxComponent label="Default" /></li>
    </ul>
  );
}
export default App;

Property: cssClass — string, defaults to ''

---

Combined Example

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

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Default size, label after" /></li>
      <li><CheckBoxComponent label="Default size, label before" labelPosition="Before" /></li>
      <li><CheckBoxComponent label="Small size, label after" cssClass="e-small" /></li>
      <li><CheckBoxComponent label="Small size, label before" cssClass="e-small" labelPosition="Before" /></li>
    </ul>
  );
}
export default App;

---

HTML Sanitization for Label

By default, enableHtmlSanitizer is true, which sanitizes untrusted HTML in the label value. Set it to false only if you need to render trusted HTML content in the label.

<CheckBoxComponent label="<b>Bold Label</b>" enableHtmlSanitizer={false} />

Avoid disabling the sanitizer for user-generated content to prevent XSS vulnerabilities.

CheckBox States — Syncfusion React CheckBox

The CheckBoxComponent supports three visual states: checked, unchecked, and indeterminate. A disabled state is also available to prevent user interaction.

---

Checked and Unchecked

Use the checked property to control the checked/unchecked state. When checked={true}, a checkmark appears in the frame.

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

function App() {
  return (
    <ul>
      {/* Checked state */}
      <li><CheckBoxComponent label="Checked State" checked={true} /></li>

      {/* Unchecked state (default) */}
      <li><CheckBoxComponent label="Unchecked State" /></li>
    </ul>
  );
}
export default App;

Property: checked — boolean, defaults to false

---

Indeterminate State

Set indeterminate={true} to display a partial-selection indicator. This is commonly used for parent checkboxes in hierarchical/tree lists where some (but not all) child items are selected.

The indeterminate state can only be set programmatically — users cannot toggle it directly.

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

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Checked State" checked={true} /></li>
      <li><CheckBoxComponent label="Unchecked State" /></li>
      <li><CheckBoxComponent label="Indeterminate State" indeterminate={true} /></li>
    </ul>
  );
}
export default App;

Property: indeterminate — boolean, defaults to false

---

Disabled State

Set disabled={true} to prevent user interaction. A disabled checkbox is visually dimmed and non-interactive. Disabled checkbox values are not submitted with forms.

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

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Active Option" checked={true} /></li>
      <li><CheckBoxComponent label="Disabled Option" disabled={true} /></li>
    </ul>
  );
}
export default App;

Property: disabled — boolean, defaults to false

---

All States Together

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Checked" checked={true} /></li>
      <li><CheckBoxComponent label="Unchecked" /></li>
      <li><CheckBoxComponent label="Indeterminate" indeterminate={true} /></li>
      <li><CheckBoxComponent label="Disabled" disabled={true} /></li>
      <li><CheckBoxComponent label="Disabled + Checked" disabled={true} checked={true} /></li>
    </ul>
  );
}
export default App;

---

Handling State Changes

Use the change event to respond when a user toggles the checkbox:

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

function App() {
  const onChange = (args: ChangeEventArgs) => {
    console.log('Checked:', args.checked);
  };

  return (
    <CheckBoxComponent label="Toggle Me" change={onChange} />
  );
}
export default App;

The ChangeEventArgs object provides the checked boolean reflecting the new state.

---

State Summary

Style and Appearance — Syncfusion React CheckBox

Table of Contents

• CSS Class Overrides
• Color Variants with cssClass
• Custom Frame Shape
• Custom Check Icon
• Theme Studio

---

CSS Class Overrides

Customize the CheckBox appearance by overriding its default CSS classes. Use the cssClass property to apply a class, then define styles in your CSS file.

The following table lists the available CSS selectors:

---

Color Variants with cssClass

Apply semantic color variants by combining cssClass with custom CSS rules. The example below creates primary, success, info, warning, and danger checkboxes:

Component (App.tsx):

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

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Primary" cssClass="e-primary" checked={true} /></li>
      <li><CheckBoxComponent label="Success" cssClass="e-success" checked={true} /></li>
      <li><CheckBoxComponent label="Info" cssClass="e-info" checked={true} /></li>
      <li><CheckBoxComponent label="Warning" cssClass="e-warning" checked={true} /></li>
      <li><CheckBoxComponent label="Danger" cssClass="e-danger" checked={true} /></li>
    </ul>
  );
}
export default App;

CSS (App.css) — example override for primary:

/* Primary */
.e-checkbox-wrapper.e-primary .e-frame.e-check,
.e-checkbox-wrapper.e-primary:hover .e-frame.e-check {
  background-color: #e3165b;
  border-color: #e3165b;
}

/* Success */
.e-checkbox-wrapper.e-success .e-frame.e-check,
.e-checkbox-wrapper.e-success:hover .e-frame.e-check {
  background-color: #4caf50;
  border-color: #4caf50;
}

/* Warning */
.e-checkbox-wrapper.e-warning .e-frame.e-check,
.e-checkbox-wrapper.e-warning:hover .e-frame.e-check {
  background-color: #ff9800;
  border-color: #ff9800;
}

/* Danger */
.e-checkbox-wrapper.e-danger .e-frame.e-check,
.e-checkbox-wrapper.e-danger:hover .e-frame.e-check {
  background-color: #f44336;
  border-color: #f44336;
}

---

Custom Frame Shape

Create round (circular) checkboxes by setting border-radius: 100% on the frame via a custom CSS class:

Component:

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Buy Groceries" cssClass="e-custom" checked={true} /></li>
      <li><CheckBoxComponent label="Pay Rent" cssClass="e-custom" /></li>
      <li><CheckBoxComponent label="Make Dinner" cssClass="e-custom" /></li>
    </ul>
  );
}
export default App;

CSS:

/* Round frame */
.e-checkbox-wrapper.e-custom .e-frame {
  border-radius: 100%;
}
.e-checkbox-wrapper.e-custom .e-frame.e-check {
  border-radius: 100%;
  background-color: #007bff;
  border-color: #007bff;
}

---

Custom Check Icon

Replace the default checkmark icon with a custom icon using CSS content override:

Component:

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

enableRipple(true);

function App() {
  return (
    <ul>
      <li><CheckBoxComponent label="Buy Groceries" cssClass="e-checkicon" checked={true} /></li>
      <li><CheckBoxComponent label="Pay Rent" cssClass="e-checkicon" /></li>
      <li><CheckBoxComponent label="Make Dinner" cssClass="e-checkicon" /></li>
    </ul>
  );
}
export default App;

CSS:

/* Custom check icon using a star symbol */
.e-checkbox-wrapper.e-checkicon .e-frame.e-check::before {
  content: '\e7ff';  /* Replace with desired icon unicode */
}
.e-checkbox-wrapper.e-checkicon:hover .e-frame.e-check,
.e-checkbox-wrapper.e-checkicon .e-frame.e-check {
  background-color: #7b1fa2;
  border-color: #7b1fa2;
}

---

Theme Studio

For comprehensive custom theming, use the Syncfusion Theme Studio to generate a custom CSS file. Import the generated CSS instead of the default theme to apply it across all Syncfusion components.

---

Tips

• Multiple CSS classes can be combined: cssClass="e-small e-primary"
• The cssClass property is the recommended way to scope styles to specific checkbox instances
• Avoid modifying Syncfusion's default CSS files directly; override via your own stylesheet with higher specificity

Accessibility — Syncfusion React ColorPicker

Table of Contents

• Compliance Overview
• WAI-ARIA Attributes
• Keyboard Navigation
• Ensuring Accessibility in Your App

---

Compliance Overview

The Syncfusion React ColorPicker component is built to meet major accessibility standards:

---

WAI-ARIA Attributes

The ColorPicker follows WAI-ARIA patterns and applies the following ARIA attributes automatically:

No extra ARIA configuration is needed — all attributes are managed automatically.

---

Keyboard Navigation

Full keyboard support is provided for both the picker gradient area and the palette grid:

Arrow key behavior:

• In Picker mode: moves the gradient selection handle to adjust hue/saturation
• In Palette mode: navigates between palette tiles

---

Ensuring Accessibility in Your App

When integrating the ColorPicker, follow these guidelines to maintain full accessibility:

1. Always provide a visible label:

<label htmlFor="theme-color">Theme Color</label>
<ColorPickerComponent id="theme-color" />

2. Use sufficient color contrast in your surrounding UI — the ColorPicker itself meets contrast requirements, but preview areas you build should also meet WCAG AA (4.5:1) contrast ratios.

3. Test with screen readers (NVDA, JAWS, VoiceOver). The component announces color names and selection state automatically.

4. Validate with tools:

• accessibility-checker
• axe-core
• Live demo: https://ej2.syncfusion.com/accessibility/color-picker.html

5. Avoid relying solely on color to convey information in your app — pair color selections with text labels or values (the change event's args.currentValue.hex can be displayed alongside the picker).

API Reference — Syncfusion React ColorPicker

Component: ColorPickerComponent Import: import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs'; Source: https://ej2.syncfusion.com/react/documentation/api/color-picker/

Table of Contents

• Properties
• Methods
• Events
• Type References

---

Properties

columns

number — Default: 10

Number of columns rendered in the palette grid. Controls how many swatches appear per row.

<ColorPickerComponent mode="Palette" columns={4} />

---

createPopupOnClick

boolean — Default: false

When true, the popup DOM element is created only when the picker is first opened (lazy creation). When false, the popup DOM is created on component initialization.

<ColorPickerComponent createPopupOnClick={true} />

---

cssClass

string — Default: ''

CSS class(es) applied to the root element. Use to scope custom styles or apply built-in utility classes.

Built-in utility values:

• "e-hide-value" — hides the hex/RGB input area in Picker mode

<ColorPickerComponent cssClass="e-hide-value my-custom-picker" />

---

disabled

boolean — Default: false

Disables the component. When true, the SplitButton appears dimmed and the popup cannot be opened.

<ColorPickerComponent disabled={true} />

---

enableOpacity

boolean — Default: true

Shows or hides the opacity slider. When false, colors are always fully opaque and the hex value uses 6 digits.

<ColorPickerComponent enableOpacity={false} />

---

enablePersistence

boolean — Default: false

Persists the component's selected color value in localStorage. The value is restored on the next page load. Requires a unique id prop to work correctly.

<ColorPickerComponent id="theme-picker" enablePersistence={true} />

---

enableRtl

boolean — Default: false

Renders the component in right-to-left direction for RTL languages (Arabic, Hebrew, etc.).

<ColorPickerComponent enableRtl={true} locale="ar-AE" />

---

inline

boolean — Default: false

When true, renders the ColorPicker container directly in the page flow (no SplitButton trigger, no popup). When false (default), renders as a SplitButton that opens a popup.

<ColorPickerComponent inline={true} showButtons={false} />

---

locale

string — Default: ''

Overrides the global culture/localization for this component instance. Pass a BCP 47 locale string (e.g., "de-DE", "ar-AE"). Requires a matching translation object loaded via L10n.load().

<ColorPickerComponent locale="de-DE" />

---

mode

'Picker' | 'Palette' — Default: 'Picker'

Determines which panel is displayed initially:

• 'Picker' — HSV gradient area with hue and opacity sliders
• 'Palette' — Grid of color swatches

<ColorPickerComponent mode="Palette" />

---

modeSwitcher

boolean — Default: true

Shows or hides the mode switcher button that lets users toggle between Picker and Palette.

// Palette only, no ability to switch
<ColorPickerComponent mode="Palette" modeSwitcher={false} />

---

noColor

boolean — Default: false

Adds a "no color" tile as the first tile in the palette. Clicking it clears the selected color (sets value to empty string).

Always combine with modeSwitcher={false} — the no-color tile only exists in palette mode.

<ColorPickerComponent mode="Palette" noColor={true} modeSwitcher={false} />

---

presetColors

{ [key: string]: string[] } — Default: null

Loads custom color groups into the palette. Each key is a group name; each value is an array of hex color strings.

const presets = {
  'brand': ['#0078d4', '#106ebe', '#005a9e'],
  'accent': ['#e81123', '#ff8c00', '#00b294']
};
<ColorPickerComponent mode="Palette" presetColors={presets} />

---

showButtons

boolean — Default: true

Shows or hides the Apply and Cancel control buttons.

• When true: change event fires on Apply click
• When false: change event fires immediately on color selection; popup closes automatically

<ColorPickerComponent showButtons={false} />

---

showRecentColors

boolean — Default: false

Displays up to 10 recently selected colors as tiles at the top of the palette. Only available in palette mode (mode="Palette").

<ColorPickerComponent showRecentColors={true} />

---

value

string — Default: '#008000ff'

Initial color value. Accepts 3, 4, 6, or 8 digit hex codes with or without the # prefix.

<ColorPickerComponent value="#ff5733" />

---

Methods

Access methods via a component ref:

let colorPicker: ColorPickerComponent;
<ColorPickerComponent ref={(scope) => { colorPicker = scope as ColorPickerComponent; }} />

---

destroy()

() => void

Removes the component from the DOM and detaches all event handlers. The original input element is preserved in the DOM.

colorPicker.destroy();

---

focusIn()

() => void

Sets focus to the ColorPicker's native element.

colorPicker.focusIn();

---

getPersistData()

() => string

Returns the properties that are maintained in the persisted state as a JSON string. Used internally by enablePersistence.

const persistedData = colorPicker.getPersistData();

---

getValue(value?, type?)

(value?: string, type?: string) => string

Converts a color value to the specified format. Can be used to convert between hex, RGB, RGBA, HSV, and other formats.

// Get current value in hex
const hex = colorPicker.getValue();

// Convert a hex string to RGB
const rgb = colorPicker.getValue('#278787', 'RGB');

// Convert RGB string to Hex
const hexOut = colorPicker.getValue('rgb(38,133,133)', 'Hex');

// Convert RGB to HSV
const hsv = colorPicker.getValue('rgb(180,71.1,52.9)', 'HSV');

---

toggle()

() => void

Opens the ColorPicker popup if it is currently closed; closes it if it is currently open.

colorPicker.toggle(); // show/hide

---

Events

beforeClose

EmitType<BeforeOpenCloseEventArgs>

Fires before the ColorPicker popup closes. Set args.cancel = true to prevent closing.

function beforeClose(args: BeforeOpenCloseEventArgs): void {
  // args.cancel = true; // prevent close
}
<ColorPickerComponent beforeClose={beforeClose} />

---

beforeModeSwitch

EmitType<ModeSwitchEventArgs>

Fires before switching between Picker and Palette modes.

function beforeModeSwitch(args: ModeSwitchEventArgs): void {
  console.log('Switching to:', args.mode);
}
<ColorPickerComponent beforeModeSwitch={beforeModeSwitch} />

---

beforeOpen

EmitType<BeforeOpenCloseEventArgs>

Fires before the ColorPicker popup opens. Set args.cancel = true to prevent opening.

function beforeOpen(args: BeforeOpenCloseEventArgs): void {
  // args.cancel = true; // prevent open
}
<ColorPickerComponent beforeOpen={beforeOpen} />

---

beforeTileRender

EmitType<PaletteTileEventArgs>

Fires before each palette tile is rendered. Use to add custom CSS classes or modify the tile element.

function tileRender(args: PaletteTileEventArgs): void {
  args.element.classList.add('e-custom-tile');
}
<ColorPickerComponent beforeTileRender={tileRender} />

---

change

EmitType<ColorPickerEventArgs>

Fires when the selected color is confirmed/applied.

• If showButtons={true}: fires when Apply is clicked
• If showButtons={false}: fires immediately on color selection

function onChange(args: ColorPickerEventArgs): void {
  console.log(args.currentValue.hex);   // "#ff5733"
  console.log(args.currentValue.rgba);  // "rgba(255,87,51,1)"
  console.log(args.previousValue.hex);  // previous color
}
<ColorPickerComponent change={onChange} />

---

created

EmitType<Event>

Fires once after the component has finished rendering.

function onCreated(): void {
  console.log('ColorPicker is ready');
}
<ColorPickerComponent created={onCreated} />

---

onModeSwitch

EmitType<ModeSwitchEventArgs>

Fires after switching between Picker and Palette modes (after the switch completes).

function afterSwitch(args: ModeSwitchEventArgs): void {
  console.log('Now showing:', args.mode);
}
<ColorPickerComponent onModeSwitch={afterSwitch} />

---

open

EmitType<OpenEventArgs>

Fires after the ColorPicker popup has opened.

function onOpen(args: OpenEventArgs): void {
  console.log('Popup opened', args.element);
}
<ColorPickerComponent open={onOpen} />

---

select

EmitType<ColorPickerEventArgs>

Fires when a color is selected in the picker or palette while showButtons={true}. This fires before Apply — use it to preview the color before it is confirmed.

function onSelect(args: ColorPickerEventArgs): void {
  // Preview the color before user clicks Apply
  previewElem.style.backgroundColor = args.currentValue.rgba;
}
<ColorPickerComponent showButtons={true} select={onSelect} />

---

Type References

ColorPickerEventArgs

{
  currentValue: { hex: string; rgba: string };
  previousValue: { hex: string; rgba: string };
  value: string;
}

ModeSwitchEventArgs

{
  mode: 'Picker' | 'Palette';
}

PaletteTileEventArgs

{
  element: HTMLElement; // The tile <span> element
  value: string;        // The tile's color value
}

BeforeOpenCloseEventArgs

{
  cancel: boolean;      // Set to true to prevent open/close
  element: HTMLElement;
}

OpenEventArgs

{
  element: HTMLElement; // The popup element
}

Getting Started — Syncfusion React ColorPicker

Table of Contents

• Prerequisites
• Create a React Application
• Install the Package
• Add CSS References
• Add the ColorPicker Component
• Run the Application

---

Prerequisites

• Node.js (LTS recommended)
• A React project using Vite or Create React App

---

Create a React Application

Using Vite (recommended):

# TypeScript
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

# JavaScript
npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Using Create React App:

npx create-react-app my-app --template typescript
cd my-app
npm start

---

Install the Package

All Syncfusion EJ2 packages are published on npmjs.com under the @syncfusion org.

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

The --save flag ensures the package is added to dependencies in package.json.

---

Add CSS References

Add the following imports in src/App.css. These cover the ColorPicker and all its dependencies (buttons, popups, split buttons):

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

Then import App.css in src/App.tsx:

import './App.css';

The order of CSS imports matters — base styles must come before component styles.

---

Add the ColorPicker Component

Place the following in src/App.tsx:

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

function App() {
  return (
    <div id="container">
      <div className="wrap">
        <h4>Choose Color</h4>
        <ColorPickerComponent id="color-picker" />
      </div>
    </div>
  );
}
export default App;

This renders a SplitButton. Clicking it opens the ColorPicker popup with the Picker (HSV) panel and Apply/Cancel buttons.

---

Run the Application

npm run dev   # Vite
# or
npm start     # Create React App

Open the URL shown in the terminal (e.g., http://localhost:5173).

---

What Renders by Default

• A SplitButton showing the currently selected color
• Clicking opens a popup with the Picker (HSV gradient + hue/opacity sliders)
• Default color: #008000ff (green, fully opaque)
• Apply button confirms the selection; Cancel discards it
• A mode switcher button toggles between Picker and Palette views

To change any of this behavior, see references/modes-and-value.md (modes/inline), references/ui-customization.md (hiding buttons), or references/palette-features.md (palette customization).