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.