# @syncfusion/ej2-inputs > A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users. Latest version **34.2.7** (published 2026-09-08) · SEE LICENSE IN license license · 0 weekly downloads ## Install ```sh npm install @syncfusion/ej2-inputs pnpm add @syncfusion/ej2-inputs yarn add @syncfusion/ej2-inputs bun add @syncfusion/ej2-inputs ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 34.2.7 | | Published | 2026-09-08 | | First published | 2017-05-10 | | Weekly downloads | 0 | | License | SEE LICENSE IN license | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 45.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 449 | | Author | Syncfusion Inc. | | Maintainers | syncfusionorg, essentialjs2, syncfusion-javascript | | Keywords | ej2, syncfusion, web-components, ej2-inputs, input box, textbox, html5 textbox, floating input, floating label, form controls, input controls, color, color picker, colorpicker, picker, palette, hsv colorpicker, alpha colorpicker, color palette, custom palette, ej2 colorpicker, color chooser, validator, form, form validator, masked textbox, masked input, input mask, date mask, mask format, numeric textbox, percent textbox, percentage textbox, currency textbox, numeric spinner, numeric up-down, number input, slider, range slider, minrange, slider limits, localization slider, format slider, slider with tooltip, vertical slider, mobile slider, upload, upload-box, input-file, floating-label, chunk-upload | ## Links - npm: https://www.npmjs.com/package/@syncfusion/ej2-inputs - Repository: https://github.com/syncfusion/ej2-javascript-ui-controls.git#master - Homepage: https://www.syncfusion.com/javascript-ui-controls - Issues: https://github.com/syncfusion/ej2-javascript-ui-controls/issues - npm.io page: https://npm.io/package/@syncfusion/ej2-inputs ## Dependencies (4) - [@syncfusion/ej2-base](https://npm.io/package/@syncfusion/ej2-base.md) ~34.2.6 - [@syncfusion/ej2-popups](https://npm.io/package/@syncfusion/ej2-popups.md) ~34.2.6 - [@syncfusion/ej2-buttons](https://npm.io/package/@syncfusion/ej2-buttons.md) ~34.2.6 - [@syncfusion/ej2-splitbuttons](https://npm.io/package/@syncfusion/ej2-splitbuttons.md) ~34.2.6 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 34.2.7 (latest) — 2026-09-08 - 26.1.35-7502 (beta) — 2025-10-07 - 34.2.6 — 2026-09-01 - 34.2.2 — 2026-08-05 - 34.1.32 — 2026-07-21 - 34.1.30 — 2026-07-09 - 34.1.29 — 2026-07-06 - 33.2.15 — 2026-06-23 - 33.2.12 — 2026-06-09 - 33.2.10 — 2026-06-02 - 33.2.5 — 2026-05-05 - 33.2.4 — 2026-04-28 - 33.2.3 — 2026-04-21 - 33.1.49 — 2026-04-14 - 33.1.47 — 2026-04-07 - … 298 more at https://npm.io/package/@syncfusion/ej2-inputs/versions ## README # JavaScript Inputs Controls > **Using this package with an AI coding agent** > > Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt: > > ```text > Set up this project for Syncfusion® before generating code. Fetch > and follow the official instructions at https://ai.syncfusion.com/, > then report the detected platform, installed skill pack, MCP > status, and any required licensing action. > ``` > The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills. > > **Platform reference:** [https://ai.syncfusion.com/javascript/llms.txt](https://ai.syncfusion.com/javascript/llms.txt) A package of JavaScript Inputs controls. It comes with a collection of form components which is useful to get different input values from the users such as text, numbers, patterns, color and file inputs. ## What's Included in the JavaScript Inputs Package The JavaScript Inputs package includes the following list of components. ### JavaScript ColorPicker The [JavaScript ColorPicker](https://www.syncfusion.com/javascript-ui-controls/js-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is a user interface that is used to select and adjust color values.

Getting Started . Online demos . Learn more

JavaScript ColorPicker Control

#### Key features * [Color specification](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=color-picker#/fluent2/color-picker/default.html) - Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes. * [Mode](https://ej2.syncfusion.com/documentation/color-picker/mode-and-value#mode-and-value) - Supports `Picker` and `Palette` mode. * [Inline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=color-picker#/fluent2/color-picker/inline.html) - Supports inline type rendering of color picker. * [Custom palettes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=color-picker#/fluent2/color-picker/custom.html) - Allows to customize palettes and supports multiple palette groups rendering. * [Opacity](https://ej2.syncfusion.com/documentation/color-picker/mode-and-value#color-value) - Allows to set and change the `opacity` of the selected color. * [Accessibility](https://ej2.syncfusion.com/documentation/color-picker/accessibility#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices. ### JavaScript Form Validator The [JavaScript Form Validator](https://www.syncfusion.com/javascript-ui-controls/js-form-validation?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is used to validate the form elements before submitting to the server.

Getting Started . Online demos . Learn more

JavaScript FormValidator Control

### JavaScript TextBox The [JavaScript TextBox](https://www.syncfusion.com/javascript-ui-controls/js-textbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is an extended version of the HTML input control which is used to edit or display text input on a form.

Getting Started . Online demos . Learn more

JavaScript TextBox Control

#### Key features * [Floating label](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/fluent2/textbox/default.html) - Floats the placeholder text while focus. * [Input group](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/fluent2/textbox/default.html) - Group the icons, buttons along with textbox. * [Validation states](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/fluent2/textbox/default.html) - Provides styles for success, error, and warning states. * [Multiline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/fluent2/textbox/default.html) - Handles multiline input with placeholder text. ### JavaScript Masked TextBox The [JavaScript Masked TextBox](https://www.syncfusion.com/javascript-ui-controls/js-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control allows the user to enter the valid input only based on the provided mask.

Getting Started . Online demos . Learn more

JavaScript MaskedTextBox Control

#### Key features * [Custom characters](https://ej2.syncfusion.com/demos/?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox/#/fluent2/maskedtextbox/custom-mask.html) - Allows you to use your own characters as the mask elements. * [Regular expression](https://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration#regular-expression?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox#regular-expression) - Can be used as a mask element for each character of the MaskedTextBox. * [Accessibility](https://ej2.syncfusion.com/documentation/maskedtextbox/accessibility?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox) - Provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices. ### JavaScript Numeric TextBox The [JavaScript Numeric TextBox](https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is used to get the number inputs from the user. The input values can be incremented or decremented by a predefined step value.

Getting Started . Online demos . Learn more

JavaScript NumericTextBox Control

#### Key features * [Range validation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox/#/fluent2/numerictextbox/range-validation.html) - Allows to set the minimum and maximum range of values in the NumericTextBox. * [Number formats](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox/#/fluent2/numerictextbox/custom-format.html) - Supports the number display formatting with MSDN standard and custom number formats. * [Precision of numbers](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox/#/fluent2/numerictextbox/restrict-decimals.html) - Allows to restrict the number precision when enters the value. * [Keyboard interaction](https://ej2.syncfusion.com/documentation/numerictextbox/accessibility#keyboard-interaction/?lang=typescript&utm_source=npm&utm_campaign=numerictextbox#keyboard-interaction) - Allows users to interact with the NumericTextBox using the keyboard. * [Accessibility](https://ej2.syncfusion.com/documentation/numerictextbox/accessibility/?lang=typescript&utm_source=npm&utm_campaign=numerictextbox) - Provides built-in accessibility support which helps to access all the NumericTextBox component features through keyboard, on-screen readers or other assistive technology devices. * [Internationalization](https://ej2.syncfusion.com/documentation/numerictextbox/globalization#internationalization/?lang=typescript&utm_source=npm&utm_campaign=numerictextbox) - Library provides support for formatting and parsing number using the official Unicode CLDR JSON data. * [Localization](https://ej2.syncfusion.com/documentation/numerictextbox/globalization#internationalization/?lang=typescript&utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures. ### JavaScript Signature The [JavaScript Signature](https://www.syncfusion.com/javascript-ui-controls/js-signature?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation. It allows to save signature as image.

Getting Started . Online demos . Learn more

JavaScript Signature Control

#### Key features * [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/signature/default.html) - Support various customization options like background color, background image, stroke color, stroke width, save with background, undo, redo, clear, readonly, and disabled. * [Save](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/signature/default.html) - Support to save the signature as image like PNG, JPEG, and SVG. * [Load](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/signature/default.html) - Support to load the signature as base64 url of the image. * [Draw](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/signature/default.html) - Support to draw the text with the different font family and font size. ### JavaScript Slider The [JavaScript Slider](https://www.syncfusion.com/javascript-ui-controls/js-range-slider?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control allows you to select a value or range of values between the min and max range.

Getting Started . Online demos . Learn more

JavaScript Slider Control

#### Key features * [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/default.html) - Provided three types of Slider. * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/orientation.html) - Displays the Slider in horizontal or vertical direction. * [Buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/tooltip.html) - Provided built-in support to render the buttons in both edges of the Slider. * [Tooltip](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/tooltip.html) - Displays a tooltip to show the currently selected value. * [Ticks](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/ticks.html) - Displays a scale with small and big ticks. * [Format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/format.html) - Customize the slider values into various format. * [Limits](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/limits.html) - Slider thumb movement restriction enabled with interval dragging in range-slider. * [Accessibility](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/default.html) - Built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. * [Keyboard interaction](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/api.html) - The Slider can be intractable through the keyboard. ### JavaScript File Upload The [JavaScript File Upload](https://www.syncfusion.com/javascript-ui-controls/js-file-upload?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is an extended version of the HTML5 upload control which is used to upload images, documents, and other files to a server.

Getting Started . Online demos . Learn more

JavaScript FileUpload Control

#### Key features * [Chunk upload](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm#/fluent2/uploader/chunk-upload.html) - Used to upload large files as chunks * [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm/#/fluent2/uploader/custom-drop-area.html) - Drag the files and drop into component to upload them. * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm/#/fluent2/uploader/custom-file-list.html) - The file list and buttons can be customize using template * [Validation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm/#/fluent2/uploader/file-validation.html) - Validate extension and size of upload file * [Auto upload](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm#/fluent2/uploader/default.html) - Process the file to upload without interaction. * [Preload files](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm/#/fluent2/uploader/preload-files.html) - View and manipulate previously uploaded files. ### JavaScript Rating The [JavaScript Rating](https://www.syncfusion.com/javascript-ui-controls/js-rating?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is used to provide a star rating or view other people’s ratings on a numeric scale for any service provided, such as for movies, applications, or products. It has several built-in features such as support for precision modes, labels, tooltip, and UI customization.

Getting Started . Online demos . Learn more

JavaScript Rating Control

#### Key features * [Precision modes](https://ej2.syncfusion.com/documentation/rating/precision-modes) - Provides different precision modes for more accurate rating. * [Labels](https://ej2.syncfusion.com/documentation/rating/labels) - Displays current value of the rating. * [Tooltip](https://ej2.syncfusion.com/documentation/rating/tooltip) - Displays additional information of the rating items. * [Selection](https://ej2.syncfusion.com/documentation/rating/selection) - Customization options for the selected rating value and selection behavior. * [Appearance](https://ej2.syncfusion.com/documentation/rating/appearance) - Customize the rating items appearance. * [Templates](https://ej2.syncfusion.com/documentation/rating/templates) - Customize the rating item with a heart, SVG, or any content that precisely matches unique needs. ### JavaScript OTP Input The [JavaScript OTP Input](https://www.syncfusion.com/javascript-ui-controls/js-otp-input?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control is designed to securely enter and verify single-use passwords for multi-factor authentication purposes in various applications, such as banking, e-commerce, or account login processes. It has several built-in features such as support for input types, styling modes, placeholder, seperators, and customization.

Getting Started . Online demos . Learn more

JavaScript OTP Input Control

#### Key features * [Input types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/otp-input/default.html) - Allow specifying the input type as text, number, or password for the OTP input. * [Styling modes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/otp-input/api.html) - Offer built-in styling options such as underline, outline, or fill. * [Placeholders](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/otp-input/api.html) - Allow setting a hint character for each input field, indicating the expected value. * [Separators](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/otp-input/api.html) - Specify a character to be placed between input fields. * [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/otp-input/api.html) - Allows customizing the default appearance, including input field styling, input length, and more. ### JavaScript SpeechToText The [JavaScript SpeechToText](https://www.syncfusion.com/javascript-ui-controls/js-speech-to-text?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) control provides seamless voice-to-text conversion in the web applications. It features real-time transcription with interim results, multilingual recognition, customizable buttons and tooltips, and error handling, ensuring an intuitive and accessible speech recognition experience.

Getting Started . Online demos . Learn more

JavaScript SpeechToText Control

Explore the demo [here](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/fluent2/speech-to-text/default.html) ### Key Features * **Real-time transcription**: Instantly captures spoken input and converts it into text ensuring smooth speech recognition. * **Interim results**: Provides partial transcriptions as the user speaks, offering dynamic real-time experience before updates before finalizing the text. * **Multilingual recognition**: Supports multiple languages and regional variations, allowing users to transcribe speech in their preferred language. * **Tooltips**: Displays informative tooltips for start and stop actions, guiding users throughout the speech recognition process. * **Appearance**: Supports predefined styles and allows customization of content and icons to meet the application design and user preferences.

Trusted by the world's leading companies Syncfusion logo

## Setup To install `inputs` and its dependent packages, use the following command, ```sh npm install @syncfusion/ej2-inputs ``` ## Supported frameworks Input controls are also offered in following list of frameworks. | [](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)
     [Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)
       [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=numerictextbox#/expense) * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=slider) * Cloud Pricing - [Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/fluent2/slider/azure-pricing.html) ## Resources * [Speech To Text Documentation](https://ej2.syncfusion.com/documentation/speech-to-text/getting-started) * [Theme Studio](https://ej2.syncfusion.com/themestudio/) * [Custom Resource Generator](https://crg.syncfusion.com/) * [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github) * [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github) * [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github) ## Support Product support is available through following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm) * Live chat ## Changelog Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/inputs/CHANGELOG.md/?utm_source=npm&utm_campaign=input). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright > This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license/?utm_source=npm&utm_campaign=input) for more info. © Copyright 2026 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. --- _Source: https://npm.io/package/@syncfusion/ej2-inputs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._