# React Inputs Components A package of React Inputs 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. ## What's Included in the React Inputs Package The React Inputs package includes the following list of components. ### React ColorPicker The [React ColorPicker](https://www.syncfusion.com/react-components/react-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component is a user interface that is used to select and adjust color values.

Getting Started . Online demos . Learn more

React ColorPicker Component

#### Key features * [Color specification](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/default) - Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes. * [Mode](https://ej2.syncfusion.com/react/documentation/color-picker/mode-and-value#mode-and-value) - Supports `Picker` and `Palette` mode. * [Inline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/inline) - Supports inline type rendering of color picker. * [Custom palettes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/custom) - Allows to customize palettes and supports multiple palette groups rendering. * [Opacity](https://ej2.syncfusion.com/react/documentation/color-picker/mode-and-value#color-value) - Allows to set and change the `opacity` of the selected color. * [Accessibility](https://ej2.syncfusion.com/react/documentation/color-picker/accessibility#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices. ### React TextBox The [React TextBox](https://www.syncfusion.com/react-components/react-textbox?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component is an extended version of the HTML input control which is used to edit or display text input on a form.

Getting Started . Online demos . Learn more

React TextBox Component

#### Key features * [Floating label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) – Floats the placeholder text while focus. * [Input group](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) – Group the icons, buttons along with textbox. * [Validation states](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) – Provides styles for success, error, and warning states. * [Multiline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) – Handles multiline input with placeholder text. ### React MaskedTextBox The [React MaskedTextBox](https://www.syncfusion.com/react-components/react-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component allows the user to enter the valid input only based on the provided mask.

Getting Started . Online demos . Learn more

React MaskedTextBox Component

#### Key features * [Custom Characters](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/custommask) - Allows you to use your own characters as the mask elements. * [Regular expression](https://ej2.syncfusion.com/react/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/react/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. ### React NumericTextBox The [React NumericTextBox](https://www.syncfusion.com/react-components/react-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component 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 . Online demos . Learn more

React NumericTextBox Component

#### Key features * [Range validation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/range) - Allows to set the minimum and maximum range of values in the NumericTextBox. * [Number formats](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/format) - Supports the number display formatting with MSDN standard and custom number formats. * [Precision Of numbers](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/restrict) - Allows to restrict the number precision when enters the value. * [Keyboard interaction](https://ej2.syncfusion.com/react/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/react/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/react/documentation/numerictextbox/globalization#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/react/documentation/numerictextbox/globalization#internationalization/?utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures. ### React Signature The [React Signature](https://www.syncfusion.com/react-components/react-signature?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) 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 . Online demos . Learn more

React Signature Component

#### 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. ### React Slider The [React Slider](https://www.syncfusion.com/react-components/react-slider?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component allows you to select a value or range of values between the min and max range.

Getting Started . Online demos . Learn more

React Slider Component

#### Key features * [Types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Provided three types of Slider. * [Orientation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation) - Displays the Slider in horizontal or vertical direction. * [Buttons](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip) - Provided built-in support to render the buttons in both edges of the Slider. * [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip) - Displays a tooltip to show the currently selected value. * [Ticks](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks) - Displays a scale with small and big ticks. * [Format](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format) - Customize the slider values into various format. * [Limits](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/limits) - Slider thumb movement restriction enabled with interval dragging in range-slider. * [Accessibility](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. * [Keyboard interaction](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api) - The Slider can be intractable through the keyboard. ### React File Upload The [React File Upload](https://www.syncfusion.com/react-components/react-file-upload?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) 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 . Online demos . Learn more

React FileUpload Component

#### Key features * [Chunk upload](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/chunk-upload) – Used to upload large files as chunks * [Drag and drop](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/custom-drop-area) – Drag the files and drop into component to upload them. * [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/custom-file-list) – The file list and buttons can be customize using template * [Validation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/file-validation) – Validate extension and size of upload file * [Auto upload](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/default) – Process the file to upload without interaction. * [Preload files](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-upload-npm#/material/uploader/preload-files) – View and manipulate previously uploaded files. ### React Rating The [React Rating](https://www.syncfusion.com/react-components/react-rating?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) component is used to provide a star rating or view other people’s ratings on a numeric scale for any service provided, such as for movies, applications, or products. It has several built-in features such as support for precision modes, labels, tooltip, and UI customization.

Getting Started . Online demos . Learn more

#### Key features * [Precision modes](https://ej2.syncfusion.com/react/documentation/rating/precision-modes) - Provides different precision modes for more accurate rating. * [Labels](https://ej2.syncfusion.com/react/documentation/rating/labels) - Displays current value of the rating. * [Tooltip](https://ej2.syncfusion.com/react/documentation/rating/tooltip) - Displays additional information of the rating items. * [Selection](https://ej2.syncfusion.com/react/documentation/rating/selection) - Customization options for the selected rating value and selection behavior. * [Appearance](https://ej2.syncfusion.com/react/documentation/rating/appearance) - Customize the rating items appearance. * [Templates](https://ej2.syncfusion.com/react/documentation/rating/templates) - Customize the rating item with a heart, SVG, or any content that precisely matches unique needs.

Trusted by the world's leading companies

## Setup To install `inputs` and its dependent packages, use the following command. ```sh npm install @syncfusion/ej2-react-inputs ``` ## Supported frameworks Input components are also offered in following list of frameworks. | [

](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [

](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github) | [

](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [

](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [

](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples * Cloud Pricing - [Live Demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=slider#/material/slider/azure-pricing) ## 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=react-inputs-npm) * [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-inputs-npm) * Live chat ## Changelog Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/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+ [React UI components](https://www.syncfusion.com/react-components), 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-react-ui-components/blob/master/license/?utm_source=npm&utm_campaign=input) for more info. © Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

	Stars	Issues	Version	Updated	Created
@clayui/color-picker	206	68	3.114.0	5 days ago	5 years ago
@mapbox/react-colorpickr			10.3.0	a year ago	7 years ago
@syncfusion/ej2-react-inputs			25.1.40	11 days ago	7 years ago
react-eyedrop	21	7	5.5.0	3 days ago	5 years ago

@clayui/color-picker vs @mapbox/react-colorpickr vs @syncfusion/ej2-react-inputs vs react-eyedrop

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past