Comprehensive guide for implementing Syncfusion TypeScript input components including ColorPicker, MaskedTextBox, OtpInput, Slider, TextArea, NumericTextBox, Rating, Signature, TextBox, uploader. Use this when adding color selection, masked formatting, OTP entry, range sliders, multiline text, numeric inputs, file upload, star ratings, signature capture, or text inputs to a TypeScript application.
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.
📄 Read: references/getting-started.md
@syncfusion/ej2-inputs)<input type="color">inline: truecreated📄 Read: references/modes-display.md
mode: 'Picker' — HSV gradient area, hue slider, opacity slidermode: 'Palette' — color grid tilesmodeSwitcher — show/hide mode-toggle buttoninline: true — render embedded without popupcreatePopupOnClick — lazy popup creationshowButtons — show/hide Apply/CancelshowRecentColors — recent color strip (palette mode only)presetColors — custom color groups with named sectionscolumns — number of tiles per rownoColor — no-color transparent tilebeforeTileRender event — customize tile elementsvalue property — HEX8 format (#rrggbbaa)getValue(value?, type?) — convert between HEX, HEXA, RGB, RGBA, HSV, HSVAchange and select events (currentValue.hex, currentValue.rgba)enableOpacityvalue + dataBind()enableOpacity — show/hide opacity slider and alpha channelenableRtl — right-to-left layoutdisabled — disable the componentenablePersistence — persist selected value across reloadscssClass — custom CSS classes for stylingfocusIn() — programmatic focus📄 Read: references/events.md
change — fires when color is applied (Apply button or immediate if showButtons: false)select — fires on color selection when showButtons: truebeforeOpen / open — popup open lifecycle (cancel support)beforeClose — popup close lifecycle (cancel support)beforeModeSwitch / onModeSwitch — mode switch lifecyclebeforeTileRender — palette tile customizationcreated — component ready📄 Read: references/api.md
ColorPickerEventArgs, PaletteTileEventArgs, BeforeOpenCloseEventArgs, OpenEventArgs, ModeSwitchEventArgsimport { 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" />
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');
| 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() |
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.
📄 Read: references/getting-started.md
mask property📄 Read: references/mask-configuration.md
customCharacterspromptChar)📄 Read: references/value-access.md
value property (raw, unmasked)getMaskedValue() method (with mask format)change eventfocusIn() / focusOut() methods📄 Read: references/customization.md
cssClass for custom stylingfloatLabelType (Never / Always / Auto)enableRtl, enabled, readonlyshowClearButtonhtmlAttributes for extra HTML attributeswidth, placeholder📄 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📄 Read: references/events.md
change event with MaskChangeEventArgsfocus event with MaskFocusEventArgs (cursor positioning)blur event with MaskBlurEventArgscreated and destroyed events📄 Read: references/validation-how-to.md
htmlAttributes: { type: 'tel' })📄 Read: references/api.md
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');
| 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) |
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();
let mask: MaskedTextBox = new MaskedTextBox({
mask: '(999) 9999-999',
value: '8674321756',
placeholder: 'Mobile Number',
floatLabelType: 'Auto'
});
mask.appendTo('#mask');
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.
📄 Read: references/getting-started.md
value propertyautoFocus for auto-focusing on render📄 Read: references/input-types.md
type — number (default), text, passwordvalue — pre-setting or reading the OTP value📄 Read: references/appearance.md
length — number of OTP input fields (default 4)disabled — disabling the entire controlcssClass — custom and predefined classes (e-success, e-warning, e-error)enableRtl — right-to-left rendering📄 Read: references/styling-modes.md
stylingMode — outlined (default), filled, underlined📄 Read: references/placeholder.md
📄 Read: references/separator.md
separator — character displayed between each input field/, -, ·)📄 Read: references/events.md
created — fires after component is renderedfocus / 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)📄 Read: references/accessibility.md
ariaLabels — per-field ARIA label arrayhtmlAttributes — custom HTML attributes📄 Read: references/api.md
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');
| 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' |
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');
import { OtpInput } from '@syncfusion/ej2-inputs';
let otpInput: OtpInput = new OtpInput({
length: 6,
type: 'password',
separator: '-',
stylingMode: 'outlined',
autoFocus: true
});
otpInput.appendTo('#otp_input');
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.
📄 Read: references/getting-started.md
@syncfusion/ej2-inputs, @syncfusion/ej2-base, @syncfusion/ej2-popups, @syncfusion/ej2-buttons)appendTovalue, min, max, stepshowButtons)type — Default, MinRange, Rangevalue: 30 vs value: [30, 70])min, max, step configurationenabled, readonly, enableRtlenableAnimation, cssClass, width📄 Read: references/ticks-and-format.md
ticks object: placement, largeStep, smallStep, showSmallTicks, formatBefore, After, Both, None# specifiers)renderingTicks and tooltipChange eventstooltip object: isVisible, placement, showOn, format, cssClassBefore, AftershowOn values: Auto, Always, Hover, Focus, ClickshowButtons — increment/decrement buttonsL10n for button labels📄 Read: references/limits.md
limits object: enabled, minStart, minEnd, maxStart, maxEnd, startHandleFixed, endHandleFixed📄 Read: references/customization.md
change eventrenderedTicks event📄 Read: references/advanced-how-to.md
refresh()FormValidator and changed event📄 Read: references/accessibility.md
role=slider, aria-valuemin/max/now/text, aria-orientation, aria-label)📄 Read: references/api.md
TicksDataModel, TooltipDataModel, LimitDataModelimport { 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');
| 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 |
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');
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');
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.
📄 Read: references/getting-started.md
value property)change event📄 Read: references/floating-label.md
floatLabelType — Never, Always, Auto behaviorplaceholder property usagelocale propertyL10n📄 Read: references/resize.md
resizeMode — Vertical, Horizontal, Both, Nonewidth property for explicit width controlrows and cols properties for visible dimensions📄 Read: references/styles-appearance.md
e-small, e-biggere-filled) and Outline (e-outline) modescssClass for custom stylingenabled (disabled state) and readonly propertiesshowClearButton and e-static-clear class📄 Read: references/adornments.md
prependTemplate — HTML before the textarea (icons, buttons)appendTemplate — HTML after the textarea (action buttons)adornmentFlow — Horizontal or Vertical layoutadornmentOrientation — how items inside adornments are arrangedAdornmentsDirection type usage📄 Read: references/max-length.md
maxLength property for character limit enforcement📄 Read: references/events.md
created, destroyed eventsinput 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)📄 Read: references/methods.md
focusIn() — programmatically set focusfocusOut() — programmatically remove focusgetPersistData() — retrieve persisted state propertiesaddAttributes() / removeAttributes() — dynamic HTML attributesdataBind() — apply pending property changes immediatelyrefresh() — re-render the componentdestroy() — remove component from DOM📄 Read: references/form-support.md
FormValidator integration with validation rules📄 Read: references/api.md
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');
| 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 |
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');
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');
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.
📄 Read: references/getting-started.md
min, max, stepformatdecimals and validateDecimalOnType📄 Read: references/formats.md
n, p (percentage), c (currency)# and 0 specifiersmin, max for percentage inputscurrency property📄 Read: references/adornments.md
prependTemplate – add elements before the input (currency symbols, icons)appendTemplate – add elements after the input (units, action buttons)change event📄 Read: references/globalization.md
locale property for culture-specific formattingL10n.load() to override spin button tooltip textenableRtlcurrency and format: 'c2'📄 Read: references/style-appearance.md
cssClass for UI appearance changese-spin-up and e-spin-down icon glyphs📄 Read: references/how-to.md
cssClass📄 Read: references/accessibility.md
spinbutton role)📄 Read: references/api.md
increment, decrement, getText, focusIn, focusOut, dataBind, etc.)change, blur, focus, created, destroyed)ChangeEventArgs, NumericBlurEventArgs, NumericFocusEventArgs)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';
let currency: NumericTextBox = new NumericTextBox({
format: 'c2',
value: 100,
placeholder: 'Price',
floatLabelType: 'Auto'
});
currency.appendTo('#currency');
let percent: NumericTextBox = new NumericTextBox({
format: 'p2',
value: 0.5,
min: 0,
max: 1,
step: 0.01,
placeholder: 'Percentage',
floatLabelType: 'Auto'
});
percent.appendTo('#percent');
let numeric: NumericTextBox = new NumericTextBox({
step: 5,
showSpinButton: false,
min: 0,
max: 100,
value: 20
});
numeric.appendTo('#numeric');
let numeric: NumericTextBox = new NumericTextBox({
value: 42,
readonly: true
});
numeric.appendTo('#numeric');
numeric.increment(5); // increase value by 5
numeric.decrement(2); // decrease value by 2
let numeric: NumericTextBox = new NumericTextBox({
value: 10,
enabled: false
});
numeric.appendTo('#numeric');
let numeric: NumericTextBox = new NumericTextBox({
value: 10,
showClearButton: true
});
numeric.appendTo('#numeric');
let numeric: NumericTextBox = new NumericTextBox({
value: 10,
allowMouseWheel: false
});
numeric.appendTo('#numeric');
| 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 |
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.
@syncfusion/ej2-inputs
└── @syncfusion/ej2-base
└── @syncfusion/ej2-popups
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" />
📄 Read: references/getting-started.md
value property📄 Read: references/selection.md
min propertyenableSingleSelection)allowReset)reset() method📄 Read: references/precision-modes.md
PrecisionType enum usage📄 Read: references/labels.md
showLabel)labelPosition)labelTemplate)LabelPosition enum values📄 Read: references/tooltip.md
showTooltip)tooltipTemplate)cssClass📄 Read: references/templates.md
emptyTemplate for unrated itemsfullTemplate for rated itemsvalue and index📄 Read: references/appearance.md
itemsCount)disabled)visible)readOnly)cssClass📄 Read: references/events.md
valueChanged – fires when rating changesbeforeItemRender – fires before each item rendersonItemHover – fires on item hovercreated – fires after render completesRatingChangedEventArgs, RatingItemEventArgs, RatingHoverEventArgs📄 Read: references/accessibility.md
role=slider, aria-valuenow, etc.)📄 Read: references/api.md
import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
value: 3.0,
allowReset: true,
showLabel: true
});
rating.appendTo('#rating');
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');
import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
value: 4.0,
readOnly: true,
showLabel: true
});
rating.appendTo('#rating');
import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
value: 3,
itemsCount: 10,
min: 1
});
rating.appendTo('#rating');
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.
📄 Read: references/getting-started.md
@syncfusion/ej2-inputs, @syncfusion/ej2-base)📄 Read: references/customization.md
maxStrokeWidth, minStrokeWidth, velocitystrokeColor (hex, RGB, named colors)backgroundColorbackgroundImagesaveWithBackground📄 Read: references/open-save.md
load(url, width?, height?) (Base64 or hosted URL)save(type?, fileName?)getSignature()saveAsBlob()getBlob(url)saveWithBackground📄 Read: references/user-interaction.md
undo() and guard with canUndo()redo() and guard with canRedo()clear()isEmpty()disabled propertyisReadOnly propertychange event for reacting to strokes, undo, redo, and clearcreated event on first renderbeforeSave event for keyboard save (Ctrl+S) customizationcanUndo, canRedo, isEmptychange event to keep toolbar state in sync📄 Read: references/accessibility.md
📄 Read: references/api.md
draw, load, save, saveAsBlob, getSignature, getBlob, undo, redo, clear, canUndo, canRedo, isEmpty, refresh, destroy)change, created, beforeSave)SignatureFileType, SignatureChangeEventArgs, SignatureBeforeSaveEventArgs)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
widthorheightis set on the canvas element.
// Draw "John Doe" in Arial, size 30
signature.draw('John Doe', 'Arial', 30);
signature.save('Png', 'my-signature');
const base64 = signature.getSignature(); // returns base64 PNG string
signature.load(base64); // reload the same signature
if (signature.canUndo()) { signature.undo(); }
if (signature.canRedo()) { signature.redo(); }
signature.disabled = true; // user cannot draw; opacity shows disabled state
signature.isReadOnly = true; // focusable but drawing is prevented
let signature: Signature = new Signature({
change: (args) => {
console.log('Signature changed; empty?', signature.isEmpty());
}
}, '#signature');
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.
📄 Read: references/getting-started.md
addIcon()floatLabelType📄 Read: references/multiline.md
multiline: trueaddAttributes({ maxlength })input event📄 Read: references/groups.md
addIcon('append' | 'prepend', iconClass)showClearButton to show a clear (×) iconrequired attribute📄 Read: references/adornments.md
prependTemplate – add icons or text before inputappendTemplate – add icons or buttons after inputdataBind()📄 Read: references/validation.md
e-warning, e-error, e-success via cssClass📄 Read: references/sizing.md
cssClass: 'e-small'cssClass: 'e-bigger'📄 Read: references/style-appearance.md
cssClass: 'e-filled'cssClass: 'e-outline'cssClass: 'e-corner'cssClass📄 Read: references/how-to.md
Input.createInput()enabled: false)readonly: true)cssClass: 'e-corner')📄 Read: references/accessibility.md
textbox and attributesaria-placeholder, aria-labelledby📄 Read: references/api.md
addIcon, addAttributes, removeAttributes, focusIn, focusOut, dataBind, etc.)change, input, blur, focus, created, destroyed)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';
// 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');
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');
import { TextBox } from '@syncfusion/ej2-inputs';
let textarea: TextBox = new TextBox({
placeholder: 'Enter your address',
multiline: true,
floatLabelType: 'Auto'
});
textarea.appendTo('#textarea');
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');
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
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');
let clearable: TextBox = new TextBox({
placeholder: 'Type to clear',
showClearButton: true,
floatLabelType: 'Auto'
});
clearable.appendTo('#clearable');
| 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 |
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.
The Uploader component offers:
files propertydropArea propertydirectoryUpload propertybytesToSize method📄 Read: references/uploader-api.md
AsyncSettingsModel, ButtonsPropsModel, FilesPropModel, FileInfo, ValidationMessagesSelectedEventArgs, UploadingEventArgs, RemovingEventArgs, BeforeRemoveEventArgs, BeforeUploadEventArgs, ActionCompleteEventArgs, CancelEventArgs, ClearingEventArgs, FileListRenderingEventArgs, PauseResumeEventArgsDropEffect enum valuesHere'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" />
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');
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);
};
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);
};
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);
});
};
For the complete API reference including all properties, methods, events, and type definitions, see references/uploader-api.md.
| 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 |
| 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 |
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
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.