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

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

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

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.

…(truncated)