syncfusion-javascript-inputs

Syncfusion javascript inputs ColorPicker

The ColorPicker component is a user interface for selecting and adjusting color values. It supports HEX, RGB, and HSV color models, palette and picker modes, opacity control, inline rendering, custom preset palettes, and dual-mode switching.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package setup (@syncfusion/ej2-inputs)
Required CSS imports and theme configuration
Basic initialization with <input type="color">
Picker mode vs. palette mode
Inline rendering with inline: true
Pre-setting a color value
Lifecycle events: created

Modes and Display

📄 Read: references/modes-display.md

mode: 'Picker' — HSV gradient area, hue slider, opacity slider
mode: 'Palette' — color grid tiles
modeSwitcher — show/hide mode-toggle button
inline: true — render embedded without popup
createPopupOnClick — lazy popup creation
showButtons — show/hide Apply/Cancel
showRecentColors — recent color strip (palette mode only)

Palette Customization

📄 Read: references/palette-customization.md

Default palette colors (100-color grid)
presetColors — custom color groups with named sections
columns — number of tiles per row
noColor — no-color transparent tile
beforeTileRender event — customize tile elements
Custom palette groups (multiple named sections)

Color Value and Conversion

📄 Read: references/color-value-conversion.md

value property — HEX8 format (#rrggbbaa)
getValue(value?, type?) — convert between HEX, HEXA, RGB, RGBA, HSV, HSVA
Reading color from change and select events (currentValue.hex, currentValue.rgba)
Opacity handling with enableOpacity
Setting programmatic color changes with value + dataBind()

Opacity and Accessibility

📄 Read: references/opacity-accessibility.md

enableOpacity — show/hide opacity slider and alpha channel
enableRtl — right-to-left layout
disabled — disable the component
enablePersistence — persist selected value across reloads
cssClass — custom CSS classes for styling
Keyboard navigation in picker and palette modes
focusIn() — programmatic focus

Events

📄 Read: references/events.md

change — fires when color is applied (Apply button or immediate if showButtons: false)
select — fires on color selection when showButtons: true
beforeOpen / open — popup open lifecycle (cancel support)
beforeClose — popup close lifecycle (cancel support)
beforeModeSwitch / onModeSwitch — mode switch lifecycle
beforeTileRender — palette tile customization
created — component ready

API Reference

📄 Read: references/api.md

All 14 properties with types and defaults
All 11 methods with parameter tables
All 9 events with argument interfaces
Event argument interfaces: ColorPickerEventArgs, PaletteTileEventArgs, BeforeOpenCloseEventArgs, OpenEventArgs, ModeSwitchEventArgs

Quick Start

Minimal Picker (Popup Mode)

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

const colorPicker: ColorPicker = new ColorPicker({
  value: '#008000ff',
  change: (args) => {
    console.log('Selected hex:', args.currentValue.hex);
    console.log('Selected rgba:', args.currentValue.rgba);
  }
});
colorPicker.appendTo('#color-picker');

<input type="color" id="color-picker" />

Palette Mode (Inline)

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

const colorPicker: ColorPicker = new ColorPicker({
  mode: 'Palette',
  inline: true,
  showButtons: false,
  change: (args) => {
    document.getElementById('preview').style.backgroundColor = args.currentValue.rgba;
  }
});
colorPicker.appendTo('#color-picker');

Common Patterns

Goal	Property / Method
Set initial color	`value: '#ff5733ff'`
Palette grid layout	`mode: 'Palette'`
Embed in page	`inline: true`
Hide Apply/Cancel	`showButtons: false`
Custom color groups	`presetColors: { primary: [...], accent: [...] }`
Disable opacity	`enableOpacity: false`
Transparent option	`noColor: true` (palette mode only)
Show recent colors	`showRecentColors: true` (palette mode only)
Convert color format	`colorPicker.getValue(hex, 'rgba')`
Toggle popup	`colorPicker.toggle()`
Focus component	`colorPicker.focusIn()`
Apply changes	`colorPicker.value = '#ff0000'; colorPicker.dataBind()`

MaskedTextBox

The MaskedTextBox (@syncfusion/ej2-inputs) enforces structured input by applying a mask pattern that guides and validates user input character by character. Use it whenever you need to ensure input follows a specific format — phone numbers, dates, IP addresses, SSNs, zip codes, and more.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and CSS imports
Basic MaskedTextBox setup
Setting the mask property
Placeholder and float label
Minimal working example

Mask Configuration

📄 Read: references/mask-configuration.md

Standard mask elements table (0, 9, #, L, ?, &, C, A, a, <, >, |, \)
Custom characters via customCharacters
Regular expression masks
Prompt character customization (promptChar)

Value Access and Programmatic Control

📄 Read: references/value-access.md

value property (raw, unmasked)
getMaskedValue() method (with mask format)
Setting value programmatically
Reading input in change event
focusIn() / focusOut() methods

Customization and Appearance

📄 Read: references/customization.md

cssClass for custom styling
floatLabelType (Never / Always / Auto)
enableRtl, enabled, readonly
showClearButton
htmlAttributes for extra HTML attributes
width, placeholder
CSS overrides for wrapper and hover states

Adornments

📄 Read: references/adornments.md

prependTemplate — inject HTML before the input (icons, labels, country codes)
appendTemplate — inject HTML after the input (buttons, icons, unit suffixes)
e-input-separator class for visual dividers
Common adornment patterns table
⚠️ Security: If template HTML contains values derived from user input or remote sources, sanitize/encode them before binding to prevent XSS injection.

Events and Interaction

📄 Read: references/events.md

change event with MaskChangeEventArgs
focus event with MaskFocusEventArgs (cursor positioning)
blur event with MaskBlurEventArgs
created and destroyed events
Setting cursor position at start/end/custom position

Validation and How-To

📄 Read: references/validation-how-to.md

FormValidator integration with custom rules
Numeric keypad on mobile (htmlAttributes: { type: 'tel' })
Checking for complete vs. partial input
Accessibility (ARIA attributes, WCAG compliance)

API Reference

📄 Read: references/api.md

All properties, methods, events, and interfaces
Complete MaskedTextBox API surface

Quick Start

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <input id="mask" type="text" />

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '000-000-0000',
    placeholder: 'Phone Number',
    floatLabelType: 'Always'
});
mask.appendTo('#mask');

Common Patterns

Scenario	Pattern
Phone number	`mask: '(999) 999-9999'`
US zip code	`mask: '00000'` or `mask: '00000-9999'`
Date	`mask: '00/00/0000'`
IP address	`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]'`
Credit card	`mask: '0000 0000 0000 0000'`
Time (AM/PM)	`mask: '00:00 >PM'` with `customCharacters: { P: 'P,A,p,a', M: 'M,m' }`
Letters only	`mask: 'LLLLLL'`
Alphanumeric	`mask: 'AAAAAA'`
Mixed case control	`mask: '>LLL<LLL'` (first 3 upper, next 3 lower)

Read the raw value

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '(999) 999-9999',
    change: (args) => {
        console.log('Raw value:', args.value);           // digits only
        console.log('Masked value:', args.maskedValue);  // with mask chars
    }
});
mask.appendTo('#mask');

// Or programmatically:
const raw = mask.value;
const formatted = mask.getMaskedValue();

Floating label with pre-filled value

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '(999) 9999-999',
    value: '8674321756',
    placeholder: 'Mobile Number',
    floatLabelType: 'Auto'
});
mask.appendTo('#mask');

OTP Input

The OTP Input (@syncfusion/ej2-inputs) renders a set of individual input fields for one-time password entry. It supports configurable length, input types (number/text/password), styling modes, separators, placeholders, accessibility attributes, and full event handling. Use it for 2FA screens, OTP verification forms, and PIN entry flows.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and CSS imports
Basic OTP Input initialization
Setting and reading the value property
autoFocus for auto-focusing on render
Minimal working example

Input Types and Value

📄 Read: references/input-types.md

type — number (default), text, password
value — pre-setting or reading the OTP value
Choosing the right type for numeric vs alphanumeric OTPs

Appearance and Configuration

📄 Read: references/appearance.md

length — number of OTP input fields (default 4)
disabled — disabling the entire control
cssClass — custom and predefined classes (e-success, e-warning, e-error)
enableRtl — right-to-left rendering

Styling Modes

📄 Read: references/styling-modes.md

stylingMode — outlined (default), filled, underlined
When to use each mode

Placeholder

📄 Read: references/placeholder.md

Single character placeholder (same for all fields)
Multi-character placeholder (one character per field)

Separator

📄 Read: references/separator.md

separator — character displayed between each input field
Common separator patterns (/, -, ·)

Events

📄 Read: references/events.md

created — fires after component is rendered
focus / blur — focus in/out events (OtpFocusEventArgs)
input — fires on each individual field change (OtpInputEventArgs)
valueChanged — fires when all fields are filled and focus-out (OtpChangedEventArgs)

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2, Section 508, ARIA compliance
ariaLabels — per-field ARIA label array
htmlAttributes — custom HTML attributes
Keyboard navigation (Arrow keys, Tab, Shift+Tab)

API Reference

📄 Read: references/api.md

All properties, methods, events, and interfaces
Complete OTP Input API surface

Quick Start

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <div id="otp_input"></div>

let otpInput: OtpInput = new OtpInput({
    length: 6,
    placeholder: 'x',
    stylingMode: 'outlined'
});
otpInput.appendTo('#otp_input');

Common Patterns

Scenario	Key Properties
4-digit numeric OTP	`type: 'number'` (default)
6-digit numeric OTP	`length: 6`
Alphanumeric code	`type: 'text'`
Hidden/password entry	`type: 'password'`
Dash separator	`separator: '-'`
Auto focus on load	`autoFocus: true`
Outlined style (default)	`stylingMode: 'outlined'`
Filled style	`stylingMode: 'filled'`
Underlined style	`stylingMode: 'underlined'`
Pre-filled value	`value: '1234'`
Disabled state	`disabled: true`
Success state styling	`cssClass: 'e-success'`
Error state styling	`cssClass: 'e-error'`

Capture completed OTP value

import { OtpInput, OtpChangedEventArgs } from '@syncfusion/ej2-inputs';

let otpInput: OtpInput = new OtpInput({
    length: 6,
    valueChanged: (args: OtpChangedEventArgs) => {
        console.log('Entered OTP:', args.value);
        // Trigger verification here
    }
});
otpInput.appendTo('#otp_input');

Password-masked OTP with separator

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

let otpInput: OtpInput = new OtpInput({
    length: 6,
    type: 'password',
    separator: '-',
    stylingMode: 'outlined',
    autoFocus: true
});
otpInput.appendTo('#otp_input');

Range Slider

The Range Slider (@syncfusion/ej2-inputs) allows users to select a single value or a range of values by dragging handles over a track. It supports three types (Default, MinRange, Range), ticks, tooltips, limits, orientation, formatting, accessibility, and form validation.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and dependencies (@syncfusion/ej2-inputs, @syncfusion/ej2-base, @syncfusion/ej2-popups, @syncfusion/ej2-buttons)
CSS theme imports
Basic Slider initialization and appendTo
Setting value, min, max, step
Orientation (horizontal/vertical)
Show/hide buttons (showButtons)

Slider Types and Core Configuration

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

type — Default, MinRange, Range
Single value vs range value (value: 30 vs value: [30, 70])
min, max, step configuration
enabled, readonly, enableRtl
enableAnimation, cssClass, width
Reversible slider (swap min/max values)

Ticks and Formatting

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

ticks object: placement, largeStep, smallStep, showSmallTicks, format
Tick placement options: Before, After, Both, None
Format API (Numeric N, Percentage P, Currency C, # specifiers)
Custom formatting via renderingTicks and tooltipChange events
Date/time formatting patterns
Custom numeric value formatting

Tooltip

📄 Read: references/tooltip-and-buttons.md

tooltip object: isVisible, placement, showOn, format, cssClass
Tooltip placement: Before, After
showOn values: Auto, Always, Hover, Focus, Click
showButtons — increment/decrement buttons
Localization with L10n for button labels

Limits

📄 Read: references/limits.md

limits object: enabled, minStart, minEnd, maxStart, maxEnd, startHandleFixed, endHandleFixed
Restricting handle movement range
Locking handles in place
Default/MinRange limits vs Range limits

Customization and Styling

📄 Read: references/customization.md

CSS class overrides for track, handle, limits, ticks, buttons
Dynamic color changes via change event
Gradient/color-band styling
Thumb shape customization (square, circle, oval, image)
Custom tick labels via renderedTicks event

Advanced How-To

📄 Read: references/advanced-how-to.md

Date format slider (milliseconds-based)
Time format slider
Custom numeric formatting (Km, decimal, leading zeros)
Reversible slider pattern
Show slider from hidden state using refresh()
Form validation with FormValidator and changed event

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2, Section 508 compliance
WAI-ARIA attributes (role=slider, aria-valuemin/max/now/text, aria-orientation, aria-label)
Keyboard navigation (Arrow keys, Home, End, Page Up/Down)

API Reference

📄 Read: references/api.md

All properties, methods, events, and sub-model interfaces
TicksDataModel, TooltipDataModel, LimitDataModel
Event argument types

Quick Start

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

// HTML: <div id="slider"></div>

let slider: Slider = new Slider({
    value: 30,
    min: 0,
    max: 100,
    step: 1
});
slider.appendTo('#slider');

Common Patterns

Scenario	Key Configuration
Single value slider	`type: 'Default'` (default), `value: 30`
Min-range shadow	`type: 'MinRange'`, `value: 30`
Range with two handles	`type: 'Range'`, `value: [30, 70]`
Vertical orientation	`orientation: 'Vertical'`
Show ticks	`ticks: { placement: 'After', largeStep: 20 }`
Show tooltip always	`tooltip: { isVisible: true, showOn: 'Always' }`
Increment/decrement buttons	`showButtons: true`
Restrict handle movement	`limits: { enabled: true, minStart: 10, minEnd: 40 }`
Currency format tooltip	`tooltip: { isVisible: true, format: 'C2' }`
Percentage format	`ticks: { format: 'P0' }`
Reversible (descending)	`min: 100, max: 0`
RTL layout	`enableRtl: true`
Disabled slider	`enabled: false`
Read-only slider	`readonly: true`

Range Slider with Ticks and Tooltip

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

let rangeSlider: Slider = new Slider({
    type: 'Range',
    value: [20, 80],
    min: 0,
    max: 100,
    step: 5,
    ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },
    tooltip: { isVisible: true, placement: 'Before', showOn: 'Always' }
});
rangeSlider.appendTo('#range-slider');

Listen to value changes

import { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';

let slider: Slider = new Slider({
    value: 30,
    changed: (args: SliderChangeEventArgs) => {
        console.log('Final value:', args.value);
    },
    change: (args: SliderChangeEventArgs) => {
        console.log('While dragging:', args.value);
    }
});
slider.appendTo('#slider');

TextArea

The TextArea (@syncfusion/ej2-inputs) provides a rich multiline text input with built-in support for floating labels, resize modes, adornments, max length enforcement, form integration, and full event handling. Use it whenever you need multiline user input — comment boxes, feedback forms, description fields, and more.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package dependencies
CSS imports and theme setup
Basic TextArea initialization
Setting and getting values (value property)
Reading value from change event
Minimal working example

Floating Label and Localization

📄 Read: references/floating-label.md

floatLabelType — Never, Always, Auto behavior
placeholder property usage
Localization with locale property
Loading translations with L10n

Resize and Dimensions

📄 Read: references/resize.md

resizeMode — Vertical, Horizontal, Both, None
width property for explicit width control
rows and cols properties for visible dimensions

Styles and Appearance

📄 Read: references/styles-appearance.md

Sizing classes: e-small, e-bigger
Filled (e-filled) and Outline (e-outline) modes
cssClass for custom styling
enabled (disabled state) and readonly properties
showClearButton and e-static-clear class
Rounded corners, background/text color customization
Floating label color (success/warning states)
Mandatory asterisk on placeholder

Adornments

📄 Read: references/adornments.md

prependTemplate — HTML before the textarea (icons, buttons)
appendTemplate — HTML after the textarea (action buttons)
adornmentFlow — Horizontal or Vertical layout
adornmentOrientation — how items inside adornments are arranged
AdornmentsDirection type usage

Max Length

📄 Read: references/max-length.md

maxLength property for character limit enforcement
User feedback on limit reached

Events

📄 Read: references/events.md

created, destroyed events
input event — fires on every keystroke (InputEventArgs)
change event — fires on focus-out with changed value (ChangedEventArgs)
focus event — fires on focus-in (FocusInEventArgs)
blur event — fires on focus-out (FocusOutEventArgs)

Methods

📄 Read: references/methods.md

focusIn() — programmatically set focus
focusOut() — programmatically remove focus
getPersistData() — retrieve persisted state properties
addAttributes() / removeAttributes() — dynamic HTML attributes
dataBind() — apply pending property changes immediately
refresh() — re-render the component
destroy() — remove component from DOM

Form Support

📄 Read: references/form-support.md

HTML form integration
FormValidator integration with validation rules
Required, minLength, maxLength rules
Custom placement of error messages

API Reference

📄 Read: references/api.md

All properties, methods, events, and interfaces
Complete TextArea API surface

Quick Start

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <textarea id="default"></textarea>

let textareaObj: TextArea = new TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto',
    resizeMode: 'Vertical'
});
textareaObj.appendTo('#default');

Common Patterns

Scenario	Key Properties
Auto-floating label	`floatLabelType: 'Auto'`
Max 200 chars	`maxLength: 200`
Vertical resize only	`resizeMode: 'Vertical'`
Outline style (Material)	`cssClass: 'e-outline'`
Filled style (Material)	`cssClass: 'e-filled'`
Read-only content	`readonly: true`
Disabled state	`enabled: false`
Always show clear button	`showClearButton: true, cssClass: 'e-static-clear'`
Pre-set value	`value: 'Initial text'`
Custom dimensions	`rows: 5, cols: 40`
RTL layout	`enableRtl: true`

Read value on change

import { TextArea, ChangedEventArgs } from '@syncfusion/ej2-inputs';

let textareaObj: TextArea = new TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto',
    change: (args: ChangedEventArgs) => {
        console.log('Value:', args.value);
    }
});
textareaObj.appendTo('#default');

Outline TextArea with floating label and max length

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

let textareaObj: TextArea = new TextArea({
    placeholder: 'Feedback',
    floatLabelType: 'Auto',
    cssClass: 'e-outline',
    maxLength: 500,
    resizeMode: 'Vertical',
    rows: 4
});
textareaObj.appendTo('#default');

NumericTextBox

The Syncfusion EJ2 TypeScript NumericTextBox (@syncfusion/ej2-inputs) is a feature-rich numeric input control that supports range validation, number formatting (standard and custom), decimal precision, spin buttons, adornments, localization, RTL, and full WCAG 2.2 accessibility.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package dependencies
Project setup (webpack quickstart)
CSS theme imports
Basic NumericTextBox initialization
Range validation with min, max, step
Formatting with format
Decimal precision with decimals and validateDecimalOnType

Formats

📄 Read: references/formats.md

Standard formats: n, p (percentage), c (currency)
Custom format strings using # and 0 specifiers
Combining format with min, max for percentage inputs
Currency format with currency property

Adornments (Prefix/Suffix Templates)

📄 Read: references/adornments.md

prependTemplate – add elements before the input (currency symbols, icons)
appendTemplate – add elements after the input (units, action buttons)
Linking two NumericTextBox instances via change event
Custom action icons with click event handlers

Globalization & Localization

📄 Read: references/globalization.md

locale property for culture-specific formatting
L10n.load() to override spin button tooltip text
CLDR data setup for non-English cultures
RTL support with enableRtl
Currency formatting with currency and format: 'c2'

Style & Appearance

📄 Read: references/style-appearance.md

Customizing wrapper element height and font size
Customizing spin button icons CSS
Applying custom cssClass for UI appearance changes
Overriding e-spin-up and e-spin-down icon glyphs

How-To Recipes

📄 Read: references/how-to.md

Customize spin button up/down arrow icons
Customize step value and hide spin buttons
Customize UI appearance with cssClass
Maintain trailing zeros while focused
Perform custom validation using FormValidator
Prevent nullable input (default to 0 instead of null)

Accessibility

📄 Read: references/accessibility.md

WAI-ARIA roles and attributes (spinbutton role)
Keyboard interaction (Arrow Up/Down)
WCAG 2.2, Section 508 compliance
Screen reader support details

API Reference

📄 Read: references/api.md

All properties with types and defaults
All methods (increment, decrement, getText, focusIn, focusOut, dataBind, etc.)
All events (change, blur, focus, created, destroyed)
Event argument types (ChangeEventArgs, NumericBlurEventArgs, NumericFocusEventArgs)

Quick Start

npm install @syncfusion/ej2-inputs
npm audit

<!-- index.html -->
<input id="numeric" type="text" />

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

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  min: 0,
  max: 100,
  step: 1,
  format: 'n2',
  placeholder: 'Enter a number',
  floatLabelType: 'Auto'
});

numeric.appendTo('#numeric');

/* styles.css – import one theme */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

Common Patterns

Currency Input

let currency: NumericTextBox = new NumericTextBox({
  format: 'c2',
  value: 100,
  placeholder: 'Price',
  floatLabelType: 'Auto'
});
currency.appendTo('#currency');

Percentage Input

let percent: NumericTextBox = new NumericTextBox({
  format: 'p2',
  value: 0.5,
  min: 0,
  max: 1,
  step: 0.01,
  placeholder: 'Percentage',
  floatLabelType: 'Auto'
});
percent.appendTo('#percent');

Hidden Spin Buttons with Custom Step

let numeric: NumericTextBox = new NumericTextBox({
  step: 5,
  showSpinButton: false,
  min: 0,
  max: 100,
  value: 20
});
numeric.appendTo('#numeric');

Read-Only NumericTextBox

let numeric: NumericTextBox = new NumericTextBox({
  value: 42,
  readonly: true
});
numeric.appendTo('#numeric');

Programmatic Increment / Decrement

numeric.increment(5);   // increase value by 5
numeric.decrement(2);   // decrease value by 2

Disable the Component

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  enabled: false
});
numeric.appendTo('#numeric');

Clear Button

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  showClearButton: true
});
numeric.appendTo('#numeric');

Mouse Wheel Disabled

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  allowMouseWheel: false
});
numeric.appendTo('#numeric');

Key Props at a Glance

Property	Type	Default	Purpose
`value`	number	null	Current numeric value
`min`	number	null	Minimum allowed value
`max`	number	null	Maximum allowed value
`step`	number	1	Increment/decrement step
`format`	string	'n2'	Display format when unfocused
`decimals`	number	null	Decimal precision when focused
`validateDecimalOnType`	boolean	false	Restrict decimals while typing
`strictMode`	boolean	true	Clamp value to min/max on blur
`floatLabelType`	FloatLabelType	'Never'	Label float behavior
`placeholder`	string	null	Hint text / float label
`showSpinButton`	boolean	true	Show/hide spin buttons
`showClearButton`	boolean	false	Show clear (×) icon
`readonly`	boolean	false	Read-only mode
`enabled`	boolean	true	Enable/disable control
`enableRtl`	boolean	false	Right-to-left layout
`locale`	string	''	Culture code
`currency`	string	null	ISO 4217 currency code
`cssClass`	string	null	Custom CSS class
`width`	number\|string	null	Component width
`allowMouseWheel`	boolean	true	Enable mouse wheel change
`enablePersistence`	boolean	false	Persist value across reloads
`prependTemplate`	string\|Function	null	HTML before input
`appendTemplate`	string\|Function	null	HTML after input
`htmlAttributes`	object	{}	Extra HTML attributes

Rating

The Rating component (@syncfusion/ej2-inputs) lets users select a value on a numeric scale by clicking or tapping symbols (stars by default). It supports precision ratings, custom templates, labels, tooltips, and full accessibility compliance.

Dependencies

@syncfusion/ej2-inputs
  └── @syncfusion/ej2-base
  └── @syncfusion/ej2-popups

Quick Start

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

let rating: Rating = new Rating({ value: 3.0 });
rating.appendTo('#rating');

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

<input id="rating" />

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package setup
CSS imports and theme configuration
Basic Rating initialization
Setting the value property
Running the application

Selection and Value Control

📄 Read: references/selection.md

Setting and reading the rating value
Minimum value with min property
Single-selection mode (enableSingleSelection)
Show/hide reset button (allowReset)
Programmatic reset via reset() method

Precision Modes

📄 Read: references/precision-modes.md

Full precision (whole numbers)
Half precision (0.5 increments)
Quarter precision (0.25 increments)
Exact precision (0.1 increments)
PrecisionType enum usage

Labels

📄 Read: references/labels.md

Showing the current value as a label (showLabel)
Label positions: Top, Bottom, Left, Right (labelPosition)
Custom label template (labelTemplate)
LabelPosition enum values

Tooltip

📄 Read: references/tooltip.md

Enabling/disabling tooltip on hover (showTooltip)
Custom tooltip template (tooltipTemplate)
Tooltip appearance customization via cssClass

Templates (Custom Symbols)

📄 Read: references/templates.md

emptyTemplate for unrated items
fullTemplate for rated items
Emoji icons as rating symbols
SVG icons as rating symbols
PNG images as rating symbols
Template context: value and index

Appearance and Styling

📄 Read: references/appearance.md

Changing item count (itemsCount)
Disabled state (disabled)
Visibility control (visible)
Read-only mode (readOnly)
Custom CSS with cssClass
Changing icon border color, fill color, item spacing
Swapping the default icon using CSS

Events

📄 Read: references/events.md

valueChanged – fires when rating changes
beforeItemRender – fires before each item renders
onItemHover – fires on item hover
created – fires after render completes
Event argument types: RatingChangedEventArgs, RatingItemEventArgs, RatingHoverEventArgs

Accessibility

📄 Read: references/accessibility.md

WAI-ARIA attributes (role=slider, aria-valuenow, etc.)
Keyboard navigation shortcuts
WCAG 2.2 / Section 508 compliance
RTL support

API Reference

📄 Read: references/api.md

All 16 properties with types and defaults
All 7 methods
All 4 events and their argument types

Common Patterns

Rating with reset button and label

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

let rating: Rating = new Rating({
  value: 3.0,
  allowReset: true,
  showLabel: true
});
rating.appendTo('#rating');

Half-precision rating with change handler

import { Rating, PrecisionType, RatingChangedEventArgs } from '@syncfusion/ej2-inputs';

let rating: Rating = new Rating({
  value: 2.5,
  precision: PrecisionType.Half,
  valueChanged: (args: RatingChangedEventArgs) => {
    console.log('New rating:', args.value);
  }
});
rating.appendTo('#rating');

Read-only display rating

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

let rating: Rating = new Rating({
  value: 4.0,
  readOnly: true,
  showLabel: true
});
rating.appendTo('#rating');

Custom item count with min value

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

let rating: Rating = new Rating({
  value: 3,
  itemsCount: 10,
  min: 1
});
rating.appendTo('#rating');

Signature

The Syncfusion EJ2 TypeScript Signature (@syncfusion/ej2-inputs) is a canvas-based control that allows users to draw smooth signatures using variable-width bezier curve interpolation with mouse, touch, or stylus input. It supports text-drawing, stroke/background customization, save/load operations, undo/redo history, and full WCAG 2.2 accessibility.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Package dependencies (@syncfusion/ej2-inputs, @syncfusion/ej2-base)
Project setup with webpack quickstart
CSS theme imports
HTML canvas element setup
Basic Signature initialization
Default canvas dimensions (300 × 150)

Customization

📄 Read: references/customization.md

Stroke width: maxStrokeWidth, minStrokeWidth, velocity
Stroke color with strokeColor (hex, RGB, named colors)
Background color with backgroundColor
Background image with backgroundImage
Saving with background using saveWithBackground

Open & Save

📄 Read: references/open-save.md

Load pre-drawn signatures via load(url, width?, height?) (Base64 or hosted URL)
Save as image (PNG/JPEG/SVG) via save(type?, fileName?)
Get Base64 string via getSignature()
Save as Blob via saveAsBlob()
Get Blob via getBlob(url)
Control background inclusion with saveWithBackground

User Interaction

📄 Read: references/user-interaction.md

Undo via undo() and guard with canUndo()
Redo via redo() and guard with canRedo()
Clear canvas via clear()
Check empty state via isEmpty()
Disable component with disabled property
Read-only mode with isReadOnly property
change event for reacting to strokes, undo, redo, and clear
created event on first render
beforeSave event for keyboard save (Ctrl+S) customization

Toolbar Integration

📄 Read: references/toolbar-integration.md

Integrating Signature with EJ2 Toolbar component
Wiring Undo/Redo/Clear/Save toolbar buttons
Adding ColorPicker for stroke and background color
Adding DropDownList for stroke width control
Enabling/disabling toolbar items based on canUndo, canRedo, isEmpty
Using change event to keep toolbar state in sync

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 and Section 508 compliance
Keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
Screen reader support
Mobile/touch device support

API Reference

📄 Read: references/api.md

All properties with types and defaults
All methods (draw, load, save, saveAsBlob, getSignature, getBlob, undo, redo, clear, canUndo, canRedo, isEmpty, refresh, destroy)
All events (change, created, beforeSave)
Supporting types (SignatureFileType, SignatureChangeEventArgs, SignatureBeforeSaveEventArgs)

Quick Start

npm install @syncfusion/ej2-inputs
npm audit

<!-- index.html -->
<canvas id="signature"></canvas>

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

let signature: Signature = new Signature({}, '#signature');

/* styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

The Signature component renders with the default HTML canvas size (300 × 150) when no explicit width or height is set on the canvas element.

Common Patterns

Draw Text as Signature

// Draw "John Doe" in Arial, size 30
signature.draw('John Doe', 'Arial', 30);

Save Signature as PNG

signature.save('Png', 'my-signature');

Get Base64 and Reload

const base64 = signature.getSignature();       // returns base64 PNG string
signature.load(base64);                         // reload the same signature

Undo / Redo with Guards

if (signature.canUndo()) { signature.undo(); }
if (signature.canRedo()) { signature.redo(); }

Disable and Read-Only

signature.disabled   = true;   // user cannot draw; opacity shows disabled state
signature.isReadOnly = true;   // focusable but drawing is prevented

React to Signature Changes

let signature: Signature = new Signature({
  change: (args) => {
    console.log('Signature changed; empty?', signature.isEmpty());
  }
}, '#signature');

TextBox

The Syncfusion EJ2 TypeScript TextBox (@syncfusion/ej2-inputs) is a feature-rich text input component that supports floating labels, multiline (textarea) mode, icon groups, adornments, validation states, sizing, RTL, autocomplete, and full WCAG 2.2 accessibility.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package dependencies
Project setup (webpack quickstart)
CSS theme imports
Basic TextBox initialization
Adding icons with addIcon()
Floating label with floatLabelType

Multiline (Textarea) Mode

📄 Read: references/multiline.md

Enable multiline with multiline: true
Floating label on multiline inputs
Auto-resize based on content
Disable resize via CSS
Limit text length with addAttributes({ maxlength })
Character count in input event

Groups, Icons & Clear Button

📄 Read: references/groups.md

Adding icons with addIcon('append' | 'prepend', iconClass)
Icon with floating label
showClearButton to show a clear (×) icon
Floating label without required attribute
Multi-line input with floating label

Adornments (Prefix/Suffix Templates)

📄 Read: references/adornments.md

prependTemplate – add icons or text before input
appendTemplate – add icons or buttons after input
Password visibility toggle pattern
Delete/clear icon pattern with dataBind()

Validation States

📄 Read: references/validation.md

Apply e-warning, e-error, e-success via cssClass
Change floating label color for validation states (CSS)
Change TextBox color based on value (keyup + regex)

Sizing

📄 Read: references/sizing.md

Normal size (default)
Small size via cssClass: 'e-small'
Bigger size via cssClass: 'e-bigger'
Combining sizing with icons and float labels

Style & Appearance

📄 Read: references/style-appearance.md

Filled mode: cssClass: 'e-filled'
Outlined mode: cssClass: 'e-outline'
Customize background color and text color (CSS override)
Customize floating label color (CSS)
Rounded corners with cssClass: 'e-corner'
Scoping styles with cssClass

How-To Recipes

📄 Read: references/how-to.md

Add TextBox programmatically using Input.createInput()
Add floating label programmatically
Add floating label to read-only TextBox
Set disabled state (enabled: false)
Set read-only state (readonly: true)
Set rounded corner (cssClass: 'e-corner')
Change floating label color for validation states
Change TextBox color based on value (keyup regex)
Customize background and text color

Accessibility

📄 Read: references/accessibility.md

WAI-ARIA role textbox and attributes
aria-placeholder, aria-labelledby
WCAG 2.2, Section 508, screen reader support
RTL support

API Reference

📄 Read: references/api.md

All properties with types and defaults
All methods (addIcon, addAttributes, removeAttributes, focusIn, focusOut, dataBind, etc.)
All events (change, input, blur, focus, created, destroyed)
Event argument types

Quick Start

npm install @syncfusion/ej2-inputs
npm audit

<!-- index.html -->
<input id="firstName" />

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

let textBox: TextBox = new TextBox({
  placeholder: 'Enter your name',
  floatLabelType: 'Auto'
});

textBox.appendTo('#firstName');

/* styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

Common Patterns

Floating Label Types

// Auto – floats label above on focus or when value entered
let autoFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Auto' });
autoFloat.appendTo('#auto');

// Always – label always floats above
let alwaysFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Always' });
alwaysFloat.appendTo('#always');

// Never – label stays as placeholder (default)
let neverFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Never' });
neverFloat.appendTo('#never');

TextBox with Icon

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

let iconTextBox: TextBox = new TextBox({
  placeholder: 'Enter Date',
  created: () => {
    iconTextBox.addIcon('append', 'e-icons e-date-range');
  }
});
iconTextBox.appendTo('#textbox');

Multiline / Textarea

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

let textarea: TextBox = new TextBox({
  placeholder: 'Enter your address',
  multiline: true,
  floatLabelType: 'Auto'
});
textarea.appendTo('#textarea');

Password Input with Visibility Toggle

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

let passwordBox: TextBox = new TextBox({
  placeholder: 'Password',
  type: 'password',
  floatLabelType: 'Auto',
  appendTemplate: '<span class="e-input-separator"></span><span id="eye-icon" class="e-icons e-eye"></span>',
  created: () => {
    const eyeIcon = document.querySelector('#eye-icon') as HTMLElement;
    if (eyeIcon) {
      eyeIcon.addEventListener('click', () => {
        if (passwordBox.type === 'password') {
          passwordBox.type = 'text';
          eyeIcon.className = 'e-icons e-eye-slash';
        } else {
          passwordBox.type = 'password';
          eyeIcon.className = 'e-icons e-eye';
        }
        passwordBox.dataBind();
      });
    }
  }
});
passwordBox.appendTo('#password');

Validation States

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

let errorBox: TextBox = new TextBox({ placeholder: 'Error state', cssClass: 'e-error' });
errorBox.appendTo('#error');

let warningBox: TextBox = new TextBox({ placeholder: 'Warning state', cssClass: 'e-warning' });
warningBox.appendTo('#warning');

let successBox: TextBox = new TextBox({ placeholder: 'Success state', cssClass: 'e-success' });
successBox.appendTo('#success');

Disabled and Read-Only

// Disabled
let disabled: TextBox = new TextBox({ placeholder: 'Disabled', enabled: false });
disabled.appendTo('#disabled');

// Read-only
let readOnly: TextBox = new TextBox({ placeholder: 'Read-only', readonly: true });
readOnly.appendTo('#readonly');

Clear Button

let clearable: TextBox = new TextBox({
  placeholder: 'Type to clear',
  showClearButton: true,
  floatLabelType: 'Auto'
});
clearable.appendTo('#clearable');

Key Props at a Glance

Property	Type	Default	Purpose
`value`	string	null	Text content
`placeholder`	string	null	Hint text / float label
`floatLabelType`	FloatLabelType	'Never'	Label float behavior
`multiline`	boolean	false	Enable textarea mode
`type`	string	'text'	Input type (text, password, email, etc.)
`enabled`	boolean	true	Enable/disable the control
`readonly`	boolean	false	Read-only mode
`showClearButton`	boolean	false	Show clear (×) icon
`cssClass`	string	''	Custom CSS class(es)
`width`	number\|string	null	Component width
`enableRtl`	boolean	false	Right-to-left layout
`autocomplete`	string	'on'	Browser autocomplete ('on'\|'off')
`locale`	string	''	Culture/locale override
`enablePersistence`	boolean	false	Persist value across reloads
`prependTemplate`	string\|Function	null	HTML before input
`appendTemplate`	string\|Function	null	HTML after input
`htmlAttributes`	object	{}	Extra HTML attributes

Uploader

The Syncfusion Uploader component provides a robust, feature-rich file upload solution for TypeScript applications. It supports multiple upload modes, file validation, drag-and-drop, chunked uploads for large files, and extensive customization options.

Component Overview

The Uploader component offers:

Multiple upload modes: Async, chunked, and form-based uploads
Comprehensive validation: File type, size, and count restrictions
Rich UI: Customizable templates, themes, and styling options
Advanced features: JWT authentication, localization, image preview/resize, progress tracking
Developer-friendly: Full TypeScript support with type definitions, events, and methods

Documentation Navigation Guide

Getting Started

📄 Read: references/uploader-getting-started.md

Dependencies and package requirements
Installation via quickstart project, npm, or CDN
TypeScript module imports
Basic component initialization
HTML structure and CSS imports
Drop area configuration
Async settings configuration
Success and failure event handling
Your first upload example
Key configuration options

File Validation

📄 Read: references/uploader-file-validation.md

File type validation with allowedExtensions
File size restrictions (minFileSize, maxFileSize)
Maximum files count limiting with isModified flag
Duplicate file validation
Pre-upload validation strategies
Custom validation logic
Validation event handling

Upload Modes & Features

📄 Read: references/uploader-upload-modes.md

Async upload configuration (single/multiple/sequential)
Preloaded files with files property
Save/Remove action with server-side examples
Adding custom HTTP headers to upload requests
Chunked upload with retryCount and retryAfterDelay
Drag-and-drop with dropArea property
Paste-to-upload from clipboard
Directory upload with directoryUpload property
Form submission with file upload
File source options and events
Event handling and callbacks (pause/resume/cancel)

Customization & Styling

📄 Read: references/uploader-customization-and-styling.md

Component-specific CSS selectors (wrapper, browse button, drop text, file container)
CSS customization and themes
Button template customization
Progress bar styling
Appearance modifications
RTL (Right-to-Left) support
Responsive design patterns

Advanced Features

📄 Read: references/uploader-advanced-features.md

JWT authentication (uploading + removing events with currentRequest)
Server-side JWT validation (ASP.NET Core example)
Localization with full key reference table
File preview functionality
Image resizing before upload
File list template and custom template (showFileList)
Form data binding
File removal and cleanup handlers

How-To Guides & Patterns

📄 Read: references/uploader-how-to-guides.md

Programmatic upload triggers
Invisible/hidden uploader UI
Additional data with uploads
Confirmation dialogs for removal
Custom button elements
MIME type validation
Convert images to binary format
File size check using bytesToSize method
Hide drop areas
Open/edit uploaded files
Sort selected files
External button triggers
Image validation on drop
WAI-ARIA accessibility compliance and keyboard shortcuts

Troubleshooting & Patterns

📄 Read: references/uploader-troubleshooting-and-examples.md

Common issues and solutions (including name attribute mismatch)
Browser compatibility notes
Performance optimization techniques
Edge cases and gotchas
Form support pattern (non-async uploads with FormValidator)
Real-world implementation patterns
Debugging tips and techniques

API Reference

📄 Read: references/uploader-api.md

Complete properties reference with types, descriptions, and defaults
All public methods with parameter tables and return types
All events with event argument details and usage examples
Supporting interfaces: AsyncSettingsModel, ButtonsPropsModel, FilesPropModel, FileInfo, ValidationMessages
Event argument interfaces: SelectedEventArgs, UploadingEventArgs, RemovingEventArgs, BeforeRemoveEventArgs, BeforeUploadEventArgs, ActionCompleteEventArgs, CancelEventArgs, ClearingEventArgs, FileListRenderingEventArgs, PauseResumeEventArgs
DropEffect enum values
Deprecated APIs noted with recommended replacements

Installation

npm install @syncfusion/ej2-inputs
npm audit

Quick Start Example

Here's a minimal TypeScript example to get started:

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

// Initialize Uploader component
// ⚠️ DEMO ONLY: Replace saveUrl and removeUrl with your own production server endpoints.
//    Do NOT use services.syncfusion.com URLs in production applications.
const uploaderObj = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.png,.pdf'
});

// Render to DOM element with id 'fileupload'
uploaderObj.appendTo('#fileupload');

// Handle file selection
uploaderObj.selected = (args: any) => {
  console.log('Files selected:', args.filesData);
};

// Handle upload completion
uploaderObj.success = (args: any) => {
  console.log('Upload successful:', args.responseText);
};

HTML element:

<input type="file" id="fileupload" name="UploadFiles" />

Common Patterns

Pattern 1: Validated File Upload

Restrict uploads to specific file types and sizes:

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.jpeg,.png,.gif',
  minFileSize: 5000,      // 5 KB
  maxFileSize: 5242880    // 5 MB
});
uploader.appendTo('#fileupload');

Pattern 2: Drag-and-Drop Upload

Enable modern file upload UX:

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  dropEffect: 'Copy',
  multiple: true,
  allowedExtensions: '.pdf,.doc,.docx'
});
uploader.appendTo('#fileupload');

// Files that are dropped also trigger the selected event
uploader.selected = (args: SelectedEventArgs) => {
  console.log('Files selected/dropped:', args.filesData);
};

Pattern 3: Large File Chunked Upload

Handle large files with resumable chunks:

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save-chunk',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove',  // Replace in production
    chunkSize: 5242880 // 5 MB chunks
  },
  allowedExtensions: '.iso,.zip,.rar',
  minFileSize: 26214400  // 25 MB minimum
});
uploader.appendTo('#fileupload');

uploader.chunkSuccess = (args: any) => {
  console.log('Chunk uploaded:', args.chunkIndex, 'size:', args.chunkSize);
};

uploader.chunkFailure = (args: any) => {
  console.log('Chunk failed for:', args.file.name, 'chunk:', args.chunkIndex);
};

Pattern 4: File Preview Before Upload

Display images and details before uploading:

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.jpeg,.png'
});
uploader.appendTo('#fileupload');

uploader.selected = (args: any) => {
  // Render preview for each file
  args.filesData.forEach((file: any) => {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      const preview = document.createElement('img');
      preview.src = e.target.result;
      preview.style.maxWidth = '100px';
      document.getElementById('preview')?.appendChild(preview);
    };
    reader.readAsDataURL(file.rawFile);
  });
};

Key Properties & Events

For the complete API reference including all properties, methods, events, and type definitions, see references/uploader-api.md.

Essential Properties

Property	Type	Purpose
`asyncSettings`	`AsyncSettingsModel`	Configure upload endpoint and behavior
`allowedExtensions`	`string`	Comma-separated file extensions to allow
`minFileSize`	`number`	Minimum file size in bytes
`maxFileSize`	`number`	Maximum file size in bytes
`multiple`	`boolean`	Allow multiple file selection
`autoUpload`	`boolean`	Auto-upload on file selection
`sequentialUpload`	`boolean`	Upload files one after another
`showFileList`	`boolean`	Show or hide the default file list
`template`	`string \| Function`	Custom file item template
`directoryUpload`	`boolean`	Enable folder/directory upload
`dropArea`	`string \| HTMLElement`	Custom drag-and-drop target
`dropEffect`	`DropEffect`	Visual drag-and-drop effect
`files`	`FilesPropModel[]`	Preloaded files on render
`enabled`	`boolean`	Enable or disable the component
`enableRtl`	`boolean`	Right-to-left rendering
`enableHtmlSanitizer`	`boolean`	Prevent XSS in filenames
`buttons`	`ButtonsPropsModel`	Customize button labels/content
`cssClass`	`string`	Custom CSS class on root element
`htmlAttributes`	`object`	Additional HTML attributes
`locale`	`string`	Override global localization

Key Events

Event	Triggered	Use Case
`selected`	File(s) selected	Validate, preview, or modify files
`uploading`	Before upload starts	Add headers, metadata, show progress
`beforeUpload`	Before upload process	Add parameters to upload request
`success`	Upload completes successfully	Handle server response
`failure`	Upload fails	Retry logic, error handling
`removing`	File being removed	Confirm removal, add custom data
`beforeRemove`	Before remove sent to server	Prevent or modify removal request
`actionComplete`	All files processed	Batch completion handling
`chunkUploading`	Each chunk starts	Add data to chunk requests
`chunkSuccess`	Chunk uploaded	Progress tracking
`chunkFailure`	Chunk failed	Retry or error handling
`pausing`	Chunk upload paused	Track pause state
`resuming`	Paused upload resumed	Track resume state
`canceling`	Chunk upload canceled	Track cancel state
`clearing`	File list being cleared	Prevent or confirm clearing
`fileListRendering`	Each file item rendered	Customize file item structure
`progress`	File uploading (AJAX progress)	Real-time progress bar updates
`change`	File list changes	React to add/remove actions
`created`	Component created	Post-init setup

Common Use Cases

Use Case 1: Product Image Upload
Validate images, resize before upload, show preview → See references/uploader-advanced-features.md

Use Case 2: Document Management
Multiple file types, large file support, form integration → See references/uploader-upload-modes.md and references/uploader-advanced-features.md

Use Case 3: User Avatar Upload
Single image, size validation, custom styling → See references/uploader-getting-started.md and references/uploader-customization-and-styling.md

Use Case 4: Secure File Uploads
JWT authentication, server validation, error handling → See references/uploader-advanced-features.md and references/uploader-troubleshooting-and-examples.md

Related Skills

Implementing Form Validation
Handling Async Operations in TypeScript
Custom Event Handling

Next Step: Start with references/uploader-getting-started.md to learn installation and basic setup, jump directly to the reference matching your use case, or consult references/uploader-api.md for the complete API reference.

CheckBox

The CheckBox component (@syncfusion/ej2-buttons) is a selection control that allows users to select one or more options from a set. It supports three states (checked, unchecked, indeterminate), labels, custom styling, form integration, and full WCAG 2.2 accessibility compliance.

Quick Start

npm install @syncfusion/ej2-buttons
npm audit

<input type="checkbox" id="checkbox" />

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';

let checkbox: CheckBox = new CheckBox({
  label: 'Accept terms and conditions',
  checked: false,
  change: (args: ChangeEventArgs) => {
    console.log('Checked:', args.checked);
  }
});
checkbox.appendTo('#checkbox');

Documentation and Navigation Guide

Getting Started

📄 Read: references/checkbox-getting-started.md

Installation and package setup (@syncfusion/ej2-buttons)
Required CSS imports and theme configuration
Basic CheckBox initialization
Label configuration
Ripple effect setup
Running the application

Label and Size

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

label property — string and HTML labels
labelPosition — Before or After (default)
cssClass: 'e-small' — small variant
Custom size with CSS overrides
Rich text labels with links and formatting

States

📄 Read: references/checkbox-states.md

Three states: checked, unchecked, indeterminate
disabled property — disable interaction
readonly property — non-editable but focusable
Programmatic state control
change event with ChangeEventArgs
Master-detail / select-all pattern
Form integration

Style and Appearance

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

Custom checked color
Border width and radius
Pill / switch-like checkboxes
Custom shapes (square, circle)
Hover and focus effects
Dark and light themes
Gradient and glassmorphism effects
Animated checkmark

How-To Patterns

📄 Read: references/checkbox-how-to.md

Form submission with name and value
Master-detail select-all pattern
Required field validation
Dynamic enable/disable
Tristate checkbox cycle
Group selection (radio-like behavior)
localStorage state persistence
AJAX form submission
Custom HTML in labels (links, etc.)

Accessibility

📄 Read: references/checkbox-accessibility.md

WAI-ARIA attributes (role="checkbox", aria-checked)
Keyboard navigation (Tab, Space, Enter)
WCAG 2.2, Section 508, ADA compliance
Screen reader support (JAWS, NVDA, VoiceOver)
Focus management and visible indicators
Color contrast (4.5:1 minimum)
Touch-friendly target sizes (44x44px)
RTL support

API Reference

📄 Read: references/checkbox-api.md

All properties with types and defaults
All methods (check, uncheck, toggle, focusIn, focusOut, click, destroy)
All events (change, created, destroyed)
ChangeEventArgs interface
CheckBoxModel interface
LabelPosition enum

Common Patterns

Simple CheckBox

import { CheckBox } from '@syncfusion/ej2-buttons';

let checkbox: CheckBox = new CheckBox({
  label: 'I agree to the terms',
  checked: false
});
checkbox.appendTo('#checkbox');

Pre-Checked with Validation

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { Button } from '@syncfusion/ej2-buttons';

let terms: CheckBox = new CheckBox({
  label: 'I accept the terms and conditions',
  change: (args: ChangeEventArgs) => {
    const submitBtn: Button = (document.getElementById('submit-btn') as any).ej2_instances[0];
    submitBtn.disabled = !args.checked;
  }
});
terms.appendTo('#terms');

let submitButton: Button = new Button({
  content: 'Continue',
  disabled: true,
  cssClass: 'e-primary'
});
submitButton.appendTo('#submit-btn');

Master-Detail (Select All)

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';

const childCheckboxes: CheckBox[] = [];

let selectAll: CheckBox = new CheckBox({
  label: 'Select All',
  change: (args: ChangeEventArgs) => {
    childCheckboxes.forEach(cb => {
      cb.checked = args.checked;
    });
  }
});
selectAll.appendTo('#select-all');

['Option 1', 'Option 2', 'Option 3'].forEach((label, index) => {
  let child: CheckBox = new CheckBox({
    label: label,
    change: () => updateSelectAllState()
  });
  child.appendTo(`#child-${index}`);
  childCheckboxes.push(child);
});

function updateSelectAllState(): void {
  const checkedCount: number = childCheckboxes.filter(cb => cb.checked).length;
  if (checkedCount === 0) {
    selectAll.checked = false;
    selectAll.indeterminate = false;
  } else if (checkedCount === childCheckboxes.length) {
    selectAll.checked = true;
    selectAll.indeterminate = false;
  } else {
    selectAll.checked = false;
    selectAll.indeterminate = true;
  }
}

Indeterminate State

import { CheckBox } from '@syncfusion/ej2-buttons';

let parentCheckbox: CheckBox = new CheckBox({
  label: 'Select all (partial)',
  indeterminate: true
});
parentCheckbox.appendTo('#parent');

Disabled Checkbox

import { CheckBox } from '@syncfusion/ej2-buttons';

let disabledCheckbox: CheckBox = new CheckBox({
  label: 'This option is unavailable',
  disabled: true,
  checked: false
});
disabledCheckbox.appendTo('#disabled-checkbox');

Small Size

import { CheckBox } from '@syncfusion/ej2-buttons';

let smallCheckbox: CheckBox = new CheckBox({
  label: 'Compact option',
  cssClass: 'e-small'
});
smallCheckbox.appendTo('#small-checkbox');

Custom Styled

import { CheckBox } from '@syncfusion/ej2-buttons';

let customCheckbox: CheckBox = new CheckBox({
  label: 'Custom branded',
  checked: true,
  cssClass: 'brand-checkbox'
});
customCheckbox.appendTo('#custom-checkbox');

.brand-checkbox .e-checkbox-wrapper .e-frame.e-check {
  background-color: #ff6b35;
  border-color: #ff6b35;
}

Form Submission

import { CheckBox } from '@syncfusion/ej2-buttons';

let newsletter: CheckBox = new CheckBox({
  label: 'Subscribe to newsletter',
  name: 'newsletter',
  value: 'subscribed'
});
newsletter.appendTo('#newsletter');

<form id="signup-form">
  <input type="checkbox" id="newsletter" />
  <button type="submit">Submit</button>
</form>

Key Props at a Glance

Property	Type	Default	Purpose
`label`	`string \| HTMLElement`	`''`	Checkbox label text
`checked`	`boolean`	`false`	Checked state
`indeterminate`	`boolean`	`false`	Indeterminate state (parent checkbox)
`disabled`	`boolean`	`false`	Disable interaction
`readonly`	`boolean`	`false`	Read-only mode
`labelPosition`	`string`	`'After'`	Label position: `Before` or `After`
`name`	`string`	`''`	Form submission name
`value`	`string`	`''`	Form submission value
`cssClass`	`string`	`''`	Custom CSS class (use `e-small` for small)
`enableRtl`	`boolean`	`false`	Right-to-left layout
`enablePersistence`	`boolean`	`false`	Persist state across reloads
`locale`	`string`	`'en-US'`	Culture code

Methods at a Glance

Method	Purpose
`check()`	Sets checked state to true
`uncheck()`	Sets checked state to false
`toggle()`	Toggles between checked/unchecked
`focusIn()`	Programmatically focuses the checkbox
`focusOut()`	Removes focus from the checkbox
`click()`	Programmatically clicks the checkbox
`destroy()`	Destroys the component instance

Events at a Glance

Event	Triggered	Use Case
`change`	Checked state changes	Form validation, conditional logic
`created`	Component ready	Post-init setup
`destroyed`	Component destroyed	Cleanup

Common Use Cases

Use Case 1: Terms Acceptance — Require users to accept terms before form submission Use Case 2: Newsletter Subscription — Allow users to opt-in/out of communications Use Case 3: Multi-Select Lists — Let users select multiple items from a list Use Case 4: Settings Toggles — Enable/disable features in user preferences Use Case 5: Filter Controls — Filter data based on selected criteria Use Case 6: Bulk Actions — Select multiple items for batch operations Use Case 7: Master-Detail — Select-all pattern with parent/child relationships Use Case 8: Form Validation — Require specific checkboxes for form submission

Common CSS Classes

Class	Purpose
`e-small`	Small-sized checkbox
`e-success`	Green success color
`e-warning`	Yellow warning color
`e-danger`	Red error color
`e-info`	Blue info color

Related Skills

Implementing Form Validation
Building Toggle / Switch UIs
RadioButton (single-select counterpart)
ButtonGroup (multi-button selection)

Next Step: Start with references/checkbox-getting-started.md to learn installation and basic setup, jump directly to the reference matching your use case, or consult references/checkbox-api.md for the complete API reference.

About this skill

Documentation and Navigation Guide

Getting Started

Modes and Display

Palette Customization

Color Value and Conversion

Opacity and Accessibility

Events

API Reference

Quick Start

Minimal Picker (Popup Mode)

Palette Mode (Inline)

Common Patterns

MaskedTextBox

Navigation Guide

Getting Started

Mask Configuration

Value Access and Programmatic Control

Customization and Appearance

Adornments

Events and Interaction

Validation and How-To

API Reference

Quick Start

Common Patterns

Read the raw value

Floating label with pre-filled value

OTP Input

Navigation Guide

Getting Started

Input Types and Value

Appearance and Configuration

Styling Modes

Placeholder

Separator

Events

Accessibility

API Reference

Quick Start

Common Patterns

Capture completed OTP value

Password-masked OTP with separator

Range Slider

Navigation Guide

Getting Started

Slider Types and Core Configuration

Ticks and Formatting

Tooltip

Limits

Customization and Styling

Advanced How-To

Accessibility

API Reference

Quick Start

Common Patterns

Range Slider with Ticks and Tooltip

Listen to value changes

TextArea

Navigation Guide

Getting Started

Floating Label and Localization

Resize and Dimensions

Styles and Appearance

Adornments

Max Length

Events

Methods

Form Support

API Reference

Quick Start

Common Patterns

Read value on change

Outline TextArea with floating label and max length

NumericTextBox

Navigation Guide

Getting Started

Formats

Adornments (Prefix/Suffix Templates)

Globalization & Localization