Syncfusion javascript inputs

📄 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

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

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

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

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

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

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

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

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

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

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

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

Quick Start Example

Here's a minimal TypeScript example to get started:

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

// Initialize Uploader component
const uploaderObj = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
  },
  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:

const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'
  },
  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:

const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'
  },
  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:

const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save-chunk',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove',
    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:

const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'
  },
  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

Key Events

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.