# Angular Inputs Components A package of Angular 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 Angular Inputs Package The Angular Inputs package includes the following list of components. ### Angular ColorPicker The [Angular ColorPicker](https://www.syncfusion.com/angular-components/angular-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component is a user interface that is used to select and adjust color values.
Getting Started . Online demos . Learn more
#### Key features * [Color specification](https://ej2.syncfusion.com/angular/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/angular/documentation/color-picker/mode-and-value#mode-and-value) - Supports `Picker` and `Palette` mode. * [Inline](https://ej2.syncfusion.com/angular/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/angular/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/angular/documentation/color-picker/mode-and-value#color-value) - Allows to set and change the `opacity` of the selected color. * [Accessibility](https://ej2.syncfusion.com/angular/documentation/color-picker/accessibility#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices. ### Angular TextBox The [Angular TextBox](https://www.syncfusion.com/angular-components/angular-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-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
#### Key features * [Floating label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Floats the placeholder text while focus. * [Input group](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Group the icons, buttons along with textbox. * [Validation states](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Provides styles for success, error, and warning states. * [Multiline](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Handles multiline input with placeholder text. ### Angular MaskedTextBox The [Angular MaskedTextBox](https://www.syncfusion.com/angular-components/angular-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component allows the user to enter the valid input only based on the provided mask.
Getting Started . Online demos . Learn more
#### Key features * [Custom characters](https://ej2.syncfusion.com/angular/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/angular/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/angular/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. ### Angular NumericTextBox The [Angular NumericTextBox](https://www.syncfusion.com/angular-components/angular-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-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
#### Key features * [Range validation](https://ej2.syncfusion.com/angular/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/angular/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/angular/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/angular/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/angular/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/angular/documentation/numerictextbox/internationalization.html?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/angular/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. ### Angular Signature The [Angular Signature](https://www.syncfusion.com/angular-components/angular-signature?utm_source=npm&utm_medium=listing&utm_campaign=angular-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
#### 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. ### Angular Slider The [Angular Slider](https://www.syncfusion.com/angular-components/angular-slider?utm_source=npm&utm_medium=listing&utm_campaign=angular-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
#### Key features * [Types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Provided three types of Slider. * [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation) - Displays the Slider in horizontal or vertical direction. * [Buttons](https://ej2.syncfusion.com/angular/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/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip) - Displays a tooltip to show the currently selected value. * [Ticks](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks) - Displays a scale with small and big ticks. * [Format](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format) - Customize the slider values into various format. * [Limits](https://ej2.syncfusion.com/angular/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/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. * [Keyboard Interaction](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api) - The Slider can be intractable through the keyboard. ### Angular File Upload The Angular [File Upload](https://www.syncfusion.com/angular-ui-components/angular-file-upload/?utm_source=npm&utm_medium=listing&utm_campaign=anuglar-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.
Getting Started . Online demos . Learn more
#### Key features * [Chunk upload](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/chunk-upload) - Used to upload large files as chunks * [Drag and drop](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/custom-drop-area) - Drag the files and drop into component to upload them. * [Template](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/custom-file-list) - The file list and buttons can be customize using template. * [Validation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/file-validation) - Validate extension and size of upload file * [Auto upload](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/default) - Process the file to upload without interaction. * [Preload files](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/preload-files) - View and manipulate previously uploaded files.
Trusted by the world's leading companies
## Setup To install `inputs` and its dependent packages, use the following command. ```sh npm install @syncfusion/ej2-angular-inputs ``` ## Supported frameworks Inputs components are also offered in following list of frameworks. | [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)