# JavaScript Inputs Controls

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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/color-picker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/color-picker/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript ColorPicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-colorpicker.png">
</p>

#### Key features

* [Color specification](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=color-picker#/material/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#/material/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#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/form-validator/validation-rules/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/form-validator/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-form-validation?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript FormValidator Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-form-validator.png">
</p>

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

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/textbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/textbox/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-textbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript TextBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-textbox.png">
</p>

#### Key features

* [Floating label](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) - Floats the placeholder text while focus.
* [Input group](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) - Group the icons, buttons along with textbox.
* [Validation states](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) - Provides styles for success, error, and warning states.
* [Multiline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/maskedtextbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/maskedtextbox/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript MaskedTextBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-maskedtextbox.png">
</p>

#### Key features

* [Custom characters](https://ej2.syncfusion.com/demos/?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox/#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/numerictextbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/numerictextbox/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript NumericTextBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-numerictextbox.png">
</p>

#### Key features

* [Range validation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox/#/material/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/#/material/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/#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/signature/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/signature/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-signature?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript Signature Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-signature.png">
</p>

#### Key features

* [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/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#/material/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#/material/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#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/range-slider/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/slider/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-range-slider?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript Slider Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-slider.png">
</p>

#### Key features

* [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Provided three types of Slider.
* [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation.html) - Displays the Slider in horizontal or vertical direction.
* [Buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/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#/material/slider/tooltip.html) - Displays a tooltip to show the currently selected value.
* [Ticks](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks.html) - Displays a scale with small and big ticks.
* [Format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format.html) - Customize the slider values into various format.
* [Limits](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/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#/material/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#/material/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.

<p align="center">
  <a href="https://ej2.syncfusion.com/documentation/uploader/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm#/material/uploader/default.html">Online demos</a> .
  <a href="https://www.syncfusion.com/javascript-ui-controls/js-file-upload?utm_source=npm&utm_medium=listing&utm_campaign=javascript-inputs-npm">Learn more</a>
</p>

<p align="center">
<img alt="JavaScript FileUpload Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-file-upload.png">
</p>

#### Key features

* [Chunk upload](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-file-upload-npm#/material/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/#/material/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/#/material/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/#/material/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#/material/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/#/material/uploader/preload-files.html) - View and manipulate previously uploaded files.

<p align="center">
Trusted by the world's leading companies
  <a href="https://www.syncfusion.com/">
    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
  </a>
</p>

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

| [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
| :-----: | :-----: | :-----: | :-----: | :-----: |

## 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#/material/slider/azure-pricing.html)

## 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’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [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 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.