What is @syncfusion/ej2-inputs?
@syncfusion/ej2-inputs is a comprehensive package that provides a variety of input controls for building modern web applications. It includes components like TextBox, NumericTextBox, MaskedTextBox, Slider, and more, which are essential for creating interactive and user-friendly forms.
What are @syncfusion/ej2-inputs's main functionalities?
TextBox
The TextBox component allows users to input text. It supports various configurations like placeholder text, floating labels, and more.
import { TextBox } from '@syncfusion/ej2-inputs';
let textBoxObj = new TextBox({
placeholder: 'Enter your name'
});
textBoxObj.appendTo('#textbox');
NumericTextBox
The NumericTextBox component is used for numerical input. It supports features like min/max values, step increments, and custom formatting.
import { NumericTextBox } from '@syncfusion/ej2-inputs';
let numericTextBoxObj = new NumericTextBox({
value: 10,
min: 0,
max: 100,
format: 'n2'
});
numericTextBoxObj.appendTo('#numerictextbox');
MaskedTextBox
The MaskedTextBox component allows users to input text in a specific format, such as phone numbers or dates, using a mask pattern.
import { MaskedTextBox } from '@syncfusion/ej2-inputs';
let maskedTextBoxObj = new MaskedTextBox({
mask: '000-000-0000'
});
maskedTextBoxObj.appendTo('#maskedtextbox');
Slider
The Slider component is used for selecting a value from a range. It supports features like min/max values, step increments, and orientation.
import { Slider } from '@syncfusion/ej2-inputs';
let sliderObj = new Slider({
value: 30,
min: 0,
max: 100,
step: 1
});
sliderObj.appendTo('#slider');
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.
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.
-
FormValidator - The FormValidator is used to validate the form elements before submitting to the server.
-
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.
-
MaskedTextBox - MaskedTextBox allows the user to enter the valid input only based on the provided mask.
-
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.
-
Slider - The slider component allows you to select a value or range of values between the min and max range.
-
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.
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
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
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.
License
Check the license detail here.
Changelog
Check the changelog here
© Copyright 2021 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.