@syncfusion/ej2-inputs

ej2-inputs

A package of 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.

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, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (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.

Setup

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

npm install @syncfusion/ej2-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
  • View Online Demos
  • Product Page

• FormValidator - The FormValidator is used to validate the form elements before submitting to the server.

  • Getting Started
  • View Online Demos
  • Product Page

• 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
  • View Online Demos
  • Product Page

• MaskedTextBox - MaskedTextBox allows the user to enter the valid input only based on the provided mask.

  • Getting Started
  • View Online Demos
  • Product Page

• 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
  • View Online Demos
  • Product Page

• Slider - The slider component allows you to select a value or range of values between the min and max range.

  • Getting Started
  • View Online Demos
  • Product Page

• Uploader - The uploader component is an extended version of the HTML5 upload control which is used to upload images, documents, and other files to a server.

  • Getting Started
  • View Online Demos
  • Product Page

Supported frameworks

Input component is also offered in following list of frameworks.

• Angular
• React
• VueJS
• ASP.NET Core
• ASP.NET MVC
• JavaScript (ES5)

Showcase samples

• Expanse Tracker (Source, Live Demo)
• Loan Calculator (Source, Live Demo)
• Cloud Pricing (Live Demo)

Key Features

1. ColorPicker

• Color specification - Supports Red Green Blue, Hue Saturation Value and Hex codes.
• Mode - Supports Picker and Palette mode.
• Inline - Supports inline type rendering of color picker.
• Custom palettes - Allows you to customize palettes and supports multiple palette groups rendering.
• Opacity - Allows to set and change the opacity of the selected color.
• Accessibility - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices.

2. TextBox

• Floating Label – floats the placeholder text while focus.
• Input Group – group the icons, buttons along with textbox.
• Validation States – provides styles for success, error, and warning states.
• Multiline – handles multiline input with placeholder text

3. MaskedTextBox

• Custom Characters - allows you to use your own characters as the mask elements.
• Regular Expression - can be used as a mask element for each character of the MaskedTextBox.
• Accessibility - 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 - allows to set the minimum and maximum range of values in the NumericTextBox.
• Number Formats - supports the number display formatting with MSDN standard and custom number formats.
• Precision Of Numbers - allows to restrict the number precision when enters the value.
• Keyboard Interaction - allows users to interact with the NumericTextBox using the keyboard.
• Accessibility - 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 - library provides support for formatting and parsing number using the official Unicode CLDR JSON data.
• Localization - Supports to localize spin up and down buttons title for the tooltip to different cultures.

5. Slider

• Types - Provided three types of Slider.
• Orientation - Displays the Slider in horizontal or vertical direction.
• Buttons - Provided built-in support to render the buttons in both edges of the Slider.
• Tooltip - Displays a tooltip to show the currently selected value.
• Ticks - Displays a scale with small and big ticks.
• Format - Customize the slider values into various format.
• Limits - Slider thumb movement restriction enabled with interval dragging in range-slider.
• Accessibility - Built-in compliance with the WAI-ARIA specifications.
• Keyboard Interaction - The Slider can be intractable through the keyboard.

6. Upload

• Chunk Upload – used to upload large files as chunks
• Drag-and-drop – drag the files and drop into component to upload them.
• Template – the file list and buttons can be customize using template
• Validation – validate extension and size of upload file
• Auto Upload – Process the file to upload without interaction.
• Preload Files – View and manipulate previously uploaded files

Support

Product support is available for through following mediums.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion, ej2.

License

Check the license detail here.

Changelog

Check the changelog here

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

Similar packages

Other packages similar to @syncfusion/ej2-inputs

react-inputs-validation

react-inputs-validation is a package that provides a set of input components with built-in validation for React applications. It offers similar functionalities like text input, numeric input, and masked input, but is specifically designed for React.

react-number-format

react-number-format is a React component for formatting and masking numeric inputs. It provides features like custom formatting, masking, and validation, similar to the NumericTextBox and MaskedTextBox components in @syncfusion/ej2-inputs.

rc-slider

rc-slider is a React component for creating sliders. It offers similar functionalities to the Slider component in @syncfusion/ej2-inputs, including support for range selection, step increments, and custom styling.