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](references/colorpicker-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](references/colorpicker-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](references/colorpicker-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](references/colorpicker-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](references/colorpicker-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](references/colorpicker-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](references/colorpicker-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) ```typescript 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'); ``` ```html <input type="color" id="color-picker" /> ``` #### Palette Mode (Inline) ```typescript import { ColorPicker } from '@syncfusion/ej2-inputs'; const colorPicker: ColorPicker = new ColorPicker({ mode: 'Palette', inline: true, showButtons: false, change: (args) => { document.getElementById('preview').style.backgroundColor = args.currentValue.rgba; } }); colorPicker.appendTo('#color-picker'); ``` --- ### Common Patterns | Goal | Property / Method | |---|---| | Set initial color | `value: '#ff5733ff'` | | Palette grid layout | `mode: 'Palette'` | | Embed in page | `inline: true` | | Hide Apply/Cancel | `showButtons: false` | | Custom color groups | `presetColors: { primary: [...], accent: [...] }` | | Disable opacity | `enableOpacity: false` | | Transparent option | `noColor: true` (palette mode only) | | Show recent colors | `showRecentColors: true` (palette mode only) | | Convert color format | `colorPicker.getValue(hex, 'rgba')` | | Toggle popup | `colorPicker.toggle()` | | Focus component | `colorPicker.focusIn()` | | Apply changes | `colorPicker.value = '#ff0000'; colorPicker.dataBind()` | ## MaskedTextBox The MaskedTextBox (`@syncfusion/ej2-inputs`) enforces structured input by applying a mask pattern that guides and validates user input character by character. Use it whenever you need to ensure input follows a specific format — phone numbers, dates, IP addresses, SSNs, zip codes, and more. ### Navigation Guide #### Getting Started 📄 **Read:** [references/getting-started.md](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-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](references/maskedtextbox-api.md) - All properties, methods, events, and interfaces - Complete MaskedTextBox API surface --- ### Quick Start ```typescript import { MaskedTextBox } from '@syncfusion/ej2-inputs'; // CSS in styles.css: // @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; // @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; // HTML: <input id="mask" type="text" /> let mask: MaskedTextBox = new MaskedTextBox({ mask: '000-000-0000', placeholder: 'Phone Number', floatLabelType: 'Always' }); mask.appendTo('#mask'); ``` --- ### Common Patterns | Scenario | Pattern | |---|---| | Phone number | `mask: '(999) 999-9999'` | | US zip code | `mask: '00000'` or `mask: '00000-9999'` | | Date | `mask: '00/00/0000'` | | IP address | `mask: '[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]'` | | Credit card | `mask: '0000 0000 0000 0000'` | | Time (AM/PM) | `mask: '00:00 >PM'` with `customCharacters: { P: 'P,A,p,a', M: 'M,m' }` | | Letters only | `mask: 'LLLLLL'` | | Alphanumeric | `mask: 'AAAAAA'` | | Mixed case control | `mask: '>LLL<LLL'` (first 3 upper, next 3 lower) | #### Read the raw value ```typescript 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 ```typescript 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](references/otp-input-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](references/otp-input-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](references/otp-input-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](references/otp-input-styling-modes.md) - `stylingMode` — `outlined` (default), `filled`, `underlined` - When to use each mode #### Placeholder 📄 **Read:** [references/placeholder.md](references/otp-input-placeholder.md) - Single character placeholder (same for all fields) - Multi-character placeholder (one character per field) #### Separator 📄 **Read:** [references/separator.md](references/otp-input-separator.md) - `separator` — character displayed between each input field - Common separator patterns (`/`, `-`, `·`) #### Events 📄 **Read:** [references/events.md](references/otp-input-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