Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-inputs

Package Overview
Dependencies
4
Maintainers
2
Versions
240
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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


Version published
Weekly downloads
150K
increased by5.44%
Maintainers
2
Created
Weekly downloads
 

Package description

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

Readme

Source

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.

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

Supported frameworks

Input component is also offered in following list of frameworks.

  1. Angular
  2. React
  3. VueJS
  4. ASP.NET Core
  5. ASP.NET MVC
  6. 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

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

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.

Keywords

FAQs

Last updated on 27 Feb 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc