# ej2-vue-inputs

A package of Syncfusion Vue UI Components (Essential JS 2) Input textbox components. 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.

![ej2-vue-inputs](https://ej2.syncfusion.com/products/images/input/readme.gif)

> Input is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2/?utm_source=npm&utm_campaign=input)

## Setup

To install Input and its dependent packages, use the following command

```sh
npm install @syncfusion/ej2-vue-inputs
```

## Components included

Following list of components are available in the package.

* **ColorPicker** - Color picker is a user interface that is used to select and adjust color values.
  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/color-picker/getting-started/?utm_source=npm&utm_campaign=color-picker)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/default.html)
  * [Product Page](https://www.syncfusion.com/vue-ui-components/color-picker)

* **TextBox** - The text box component is an extended version of the HTML input control which is used to edit or display text input on a form.
  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/textbox/getting-started/?utm_source=npm&utm_campaign=textbox)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default.html)
  * [Product Page](https://www.syncfusion.com/vue-ui-components/text-box/?utm_source=npm&utm_campaign=text-box)

* **MaskedTextBox** - MaskedTextBox allows the user to enter the valid input only based on the provided mask.
  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/maskedtextbox/getting-started/?utm_source=npm&utm_campaign=maskedtextbox)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/default.html)
  * [Product Page](https://www.syncfusion.com/vue-ui-components/maskedtextbox/?utm_source=npm&utm_campaign=maskedtextbox)

* **NumericTextBox** - NumericTextBox 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](https://ej2.syncfusion.com/vue/documentation/numerictextbox/getting-started/?utm_source=npm&utm_campaign=numerictextbox)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/default.html)
  * [Product Page](https://www.syncfusion.com/vue-ui-components/numerictextbox/?utm_source=npm&utm_campaign=numerictextbox)

* **Signature** - The Signature component 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](https://ej2.syncfusion.com/documentation/signature/getting-started?lang=typescript&utm_source=npm&utm_campaign=signature)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=signature#/material/signature/default.html)
  * [Product Page](https://www.syncfusion.com/javascript-ui-controls/signature/?utm_source=npm&utm_campaign=signature)

* **Slider** - The slider component allows you to select a value or range of values between the min and max range.
  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/slider/getting-started/?utm_source=npm&utm_campaign=slider)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html)
  * [Product Page](https://www.syncfusion.com/vue-ui-components/slider/?utm_source=npm&utm_campaign=slider)

* **Uploader** - The [Vue File Upload](https://www.syncfusion.com/vue-ui-components/vue-file-upload/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm) component is an extended version of the HTML5 upload control which is used to upload images, documents, and other files to a server.
  * [Product Page](https://www.syncfusion.com/vue-ui-components/vue-file-upload/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm)
  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/uploader/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm)
  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/default.html)

## Supported frameworks

Input component is also offered in following list of frameworks.

1. [Angular](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/inputs/?utm_source=npm&utm_campaign=input)
2. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/inputs/?utm_source=npm&utm_campaign=input)
3. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/numeric-textbox/?utm_source=npm&utm_campaign=input)
4. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/input-mask/?utm_source=npm&utm_campaign=input)
5. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/range-slider/?utm_source=npm&utm_campaign=input)

## Showcase samples

* Cloud Pricing ([Live Demo](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/azure-pricing.html))

## Key Features

### 1. ColorPicker
- [**Color specification**](https://ej2.syncfusion.com/vue/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/vue/documentation/color-picker/mode-and-value#mode-and-value) - Supports `Picker` and `Palette` mode.
- [**Inline**](https://ej2.syncfusion.com/vue/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/vue/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/custom.html) - Allows you to customize palettes and supports multiple palette groups rendering.
- [**Opacity**](https://ej2.syncfusion.com/vue/documentation/color-picker/mode-and-value#color-value) - Allows to set and change the `opacity` of the selected color.
- [**Accessibility**](https://ej2.syncfusion.com/vue/documentation/color-picker/accessibility#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices.

### 2. TextBox
- [**Floating Label**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default.html) – floats the placeholder text while focus.
- [**Input Group**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default.html) – group the icons, buttons along with textbox.
- [**Validation States**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default.html) – provides styles for success, error, and warning states.
- [**Multiline**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default.html) – handles multiline input with placeholder text

### 3. MaskedTextBox
- [**Custom Characters**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/custommask.html) - allows you to use your own characters as the mask elements.
- [**Regular Expression**](https://ej2.syncfusion.com/vue/documentation/maskedtextbox/mask-configuration#regular-expression/?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/vue/documentation/maskedtextbox/accessibility/?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.

### 4. NumericTextBox
- [**Range Validation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/range.html) - allows to set the minimum and maximum range of values in the NumericTextBox.
- [**Number Formats**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/format.html) - supports the number display formatting with MSDN standard and custom number formats.
- [**Precision Of Numbers**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/restrict.html) - allows to restrict the number precision when enters the value.
- [**Keyboard Interaction**](https://ej2.syncfusion.com/vue/documentation/numerictextbox/accessibility#keyboard-interaction/?utm_source=npm&utm_campaign=numerictextbox#keyboard-interaction) - allows users to interact with the NumericTextBox using the keyboard.
- [**Accessibility**](https://ej2.syncfusion.com/vue/documentation/numerictextbox/accessibility/?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/vue/documentation/numerictextbox/internationalization/?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/vue/documentation/numerictextbox/internationalization#localization/?utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures.

### 5. Signature
- [**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.

### 6. Slider
- [**Types**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Provided three types of Slider.
- [**Orientation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation.html) - Displays the Slider in horizontal or vertical direction.
- [**Buttons**](https://ej2.syncfusion.com/vue/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/vue/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/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks.html) - Displays a scale with small and big ticks.
- [**Format**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format.html) - Customize the slider values into various format.
- [**Limits**](https://ej2.syncfusion.com/vue/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/vue/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/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api.html) - The Slider can be intractable through the keyboard.

### 7. Upload
- [**Chunk Upload**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/chunk-upload.html) – used to upload large files as chunks
- [**Drag-and-drop**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/custom-drop-area.html) – drag the files and drop into component to upload them.
- [**Template**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/custom-file-list.html) – the file list and buttons can be customize using template
- [**Validation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/file-validation.html) – validate extension and size of upload file
- [**Auto Upload**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/default.html) – Process the file to upload without interaction.
- [**Preload Files**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/preload-files.html) – View and manipulate previously uploaded files

## Support

Product support is available for through following mediums.

* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents/?utm_source=npm&utm_campaign=input) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2/?utm_source=npm&utm_campaign=input).
* New [GitHub issue](https://github.com/syncfusion/ej2-vue-ui-components/issues/new).
* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.

## License

Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license/?utm_source=npm&utm_campaign=input).

## Changelog

Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/inputs/CHANGELOG.md/?utm_source=npm&utm_campaign=input)

© Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
