# Angular Inputs Overview

The Kendo UI for Angular Inputs are fields for allowing the input of data based on specific and predefined formats.

They include a variety of input types and styles that have extensive configuration options. This flexibility allows you to quickly and easily create the exact input you need to fit your specific requirements for functionality and appearance.

The Inputs are built from the ground up and specifically for Angular, so that you get high-performance input controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.

<CtaPanelOverview></CtaPanelOverview>

<Row>
  <Column count={6}>
    <Component href="/inputs/checkbox">
      <ComponentIcon>
        <path class="cls-1" d="M0,0V24H24V0ZM22,22H2V2H22ZM20,7.8V5L10,15.2,6.8,12H4l6,6Z"/>
      </ComponentIcon>
      <ComponentTitle>CheckBox</ComponentTitle>
      <ComponentDescription>A directive for rendering a checkbox element</ComponentDescription>
    </Component>
  </Column>

<Column count={6}>
  <Component href="/inputs/colorgradient">
    <ComponentIcon>
      <path
        class="cls-1"
        d="M21,24V11h2v11L21,24z M23,3V0l-2,0v3H23z M20,5v4h4V5H20z M9,2.8c-2.7,2.8-7,8-7,12.2c0,3.9,3.1,7,7,7s7-3.1,7-7
                    C16,10.8,11.7,5.6,9,2.8 M9,0c0,0,9,8,9,15c0,5-4,9-9,9s-9-4-9-9C0,8,9,0,9,0L9,0z M13,14h-2c0,1.7-1.3,3-3,3v2
                    C10.8,19,13,16.8,13,14z"
      />
    </ComponentIcon>
    <ComponentTitle>ColorGradient</ComponentTitle>
    <ComponentDescription>
      A component for displaying gradient, a hue and an alpha slider used to
      pick colors
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/colorpalette">
    <ComponentIcon>
      <path
        class="cls-1"
        d="M12,2c0.8,0,1.5,0.1,2.3,0.3C14.1,2.8,14,3.4,14,4c0,3.3,2.7,6,6,6c0.6,0,1.2-0.1,1.7-0.3c0.2,0.7,0.3,1.5,0.3,2.3
                    c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2 M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12c0-1.9-0.4-3.6-1.2-5.2
                    C22.1,7.6,21.1,8,20,8c-2.2,0-4-1.8-4-4c0-1.1,0.4-2.1,1.2-2.8C15.6,0.4,13.9,0,12,0L12,0z M10.1,4.2c-1.1,0-2,0.9-2,2s0.9,2,2,2
                    s2-0.9,2-2S11.2,4.2,10.1,4.2z M6.1,8.7c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S7.2,8.7,6.1,8.7z M7.9,14.3c-1.1,0-2,0.9-2,2
                    c0,1.1,0.9,2,2,2s2-0.9,2-2C9.9,15.2,9,14.3,7.9,14.3z M13.8,15.8c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2
                    C15.8,16.7,14.9,15.8,13.8,15.8z M17.9,11.6c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S19.1,11.6,17.9,11.6z M12,11
                    c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S11.4,11,12,11 M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10L12,10z"
      />
    </ComponentIcon>
    <ComponentTitle>ColorPallete</ComponentTitle>
    <ComponentDescription>
      A component for selecting one or more items from a set
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/colorpicker">
    <ComponentIcon>
      <path
        class="cls-1"
        d="M11,17v2a5,5,0,0,0,5-5H14A3,3,0,0,1,11,17ZM12,0S3,8,3,15a9,9,0,0,0,18,0C21,8,12,0,12,0Zm0,22a7,7,0,0,1-7-7C5,9,12,2.71,12,2.71S19,9,19,15A7,7,0,0,1,12,22Z"
      />
    </ComponentIcon>
    <ComponentTitle>ColorPicker</ComponentTitle>
    <ComponentDescription>
      A component for selecting and submitting color values
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/flatcolorpicker">
    <ComponentIcon>
      <path
        class="cls-1"
        d="M20,0v4h4V0L20,0z M20,5v4h4V5H20z M9,2.8c-2.7,2.8-7,8-7,12.2c0,3.9,3.1,7,7,7s7-3.1,7-7C16,10.8,11.7,5.6,9,2.8 M9,0
	c0,0,9,8,9,15c0,5-4,9-9,9s-9-4-9-9C0,8,9,0,9,0L9,0z M13,14h-2c0,1.7-1.3,3-3,3v2C10.8,19,13,16.8,13,14z"
      />
    </ComponentIcon>
    <ComponentTitle>FlatColorPicker</ComponentTitle>
    <ComponentDescription>
      A component for selecting and submitting color values, through different views
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/form">
    <ComponentIcon>
      <path id="forms" d="M1,5H13l-2,2H1v-2Zm0,18H6l3-3H1v3Zm9,0h5l3-3H10v3ZM1,3H21l2-2H1V3Zm0,8H21l2-2H1v2Zm0,4H21l2-2H1v2Z"/>
    </ComponentIcon>
    <ComponentTitle>Form</ComponentTitle>
    <ComponentDescription>
      A component for grouping form-related content such as inputs, labels, hint and error messages
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/maskedtextbox">
    <svg id="maskedtextbox" viewBox="0 0 72 72">
      <path
        d="M0,30v42h72V30H0z M66,66H6V36h60V66z M12,55.8l4.2,4.2l4.8-4.8l4.8,4.8h0l4.2-4.2L25.2,51l4.8-4.8L25.8,42
L21,46.8L16.2,42L12,46.2l4.8,4.8L12,55.8z M33,55.8l4.2,4.2l4.8-4.8l4.8,4.8h0l4.2-4.2L46.2,51l4.8-4.8L46.8,42L42,46.8L37.2,42
L33,46.2l4.8,4.8L33,55.8z"
      />
    </svg>
    <ComponentTitle>MaskedTextBox</ComponentTitle>
    <ComponentDescription>
      A component for controlling the input of the user
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/numerictextbox">
    <svg id="numerictextbox" viewBox="0 0 72 72">
      <path d="M0,30v42h72V30H0z M66,66H6V36h60V66z M36,54H12v6h18L36,54z M54,42h6v6h-6V42z M54,54h6v6h-6V54z" />
    </svg>
    <ComponentTitle>NumericTextBox</ComponentTitle>
    <ComponentDescription>
      A component for editing and submitting specific numeric values
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/otpinput">
     <ComponentIcon>
      <path id="otpinput" d="M6 10.8L4 12.8H3V10.8H6ZM10 10.8V12.8H11L13 10.8H10ZM17 10.8V12.8H18L20 10.8H17ZM23 6.79999V16.8H0V6.79999H23ZM7 8.79999H2V14.8H7V8.79999ZM14 8.79999H9V14.8H14V8.79999ZM21 8.79999H16V14.8H21V8.79999Z"/>
     </ComponentIcon>
    <ComponentTitle>OTP Input</ComponentTitle>
    <ComponentDescription>
      A component for entering a one-time password
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/radiobutton">
    <ComponentIcon>
      <path
        class="cls-1"
        d="M12,7a5,5,0,1,0,5,5A5,5,0,0,0,12,7Zm0-7A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10,10,0,0,1,12,22Z"
      />
    </ComponentIcon>
    <ComponentTitle>RadioButton</ComponentTitle>
    <ComponentDescription>
      A directive for rendering a radiobutton element
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/rangeslider">
    <ComponentIcon>
      <path d="M0,13H2V11H0Zm4,1H8V10H4Zm16-3v2h2l2-2ZM10,13h2V11H10Zm4,1h4V10H14Z" />
    </ComponentIcon>
    <ComponentTitle>RangeSlider</ComponentTitle>
    <ComponentDescription>
      A component for selecting range-values from a predefined range
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/rating">
    <ComponentIcon>
      <path id="rating" d="M22,9.75l-6.91-1-3.09-6.26-3.09,6.26-6.91,1,5,4.87-1.18,6.88,6.18-3.25,6.18,3.25-1.18-6.88,5-4.87Zm-10,6.89V5.73l2.14,4.33,4.78,.7-3.46,3.37,.82,4.77-4.27-2.25Z"/>
    </ComponentIcon>
    <ComponentTitle>Rating</ComponentTitle>
    <ComponentDescription>
      A component for rating
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/signature">
    <ComponentIcon>
      <polygon points="10,15.1 10,17.9 24,3.9 24,1.1"/>
      <polygon points="7,17.9 9,15.9 4,15.9 4,17.9"/>
      <polygon points="20,10.9 22,10.9 22,20.9 2,20.9 2,10.9 11,10.9 13,8.9 0,8.9 0,22.9 24,22.9 24,8.9 22,8.9"/>
    </ComponentIcon>
    <ComponentTitle>Signature</ComponentTitle>
    <ComponentDescription>
      A component for creating handwritten signatures
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/slider">
    <svg id="slider" viewBox="0 0 72 72">
      <path
        d="M72,37H60v6h6L72,37z M0,37h36v6H0V37z M36,69h30l6-6H36V69z M0,63h12v6H0V63z M42,34h12v12H42V34z M18,60h12
v12H18V60z"
      />
    </svg>
    <ComponentTitle>Slider</ComponentTitle>
    <ComponentDescription>
      A component for selecting values from a predefined range
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/switch">
    <svg id="switch" viewBox="0 0 72 72">
      <path d="M0,36v36h72V36H0z M66,66H6V42h60V66z M36,60H12V48h24V60z" />
    </svg>
    <ComponentTitle>Switch</ComponentTitle>
    <ComponentDescription>
      A component for toggling between checked and unchecked states
    </ComponentDescription>
  </Component>
</Column>

<Column count={6}>
  <Component href="/inputs/textarea">
    <ComponentIcon>
      <path id="textarea" d="M0,0V24H24V0H0ZM22,22H2V2H22V22Zm-4-4h2v2h-2v-2ZM6,11h2v3h2V6l-2-2h-2l-2,2V14h2v-3Zm0-5h2v3h-2v-3Zm12,6v-2l-1-1,1-1v-2l-2-2h-4V14h4l2-2Zm-4-6h2v2h-2v-2Zm0,4h2v2h-2v-2Z"/>
    </ComponentIcon>
    <ComponentTitle>TextArea</ComponentTitle>
    <ComponentDescription>
      A component for getting or displaying multiline text input submitted by
      the user
    </ComponentDescription>
  </Component>
</Column>

  <Column count={6}>
    <Component href="/inputs/textbox">
      <svg id="textbox" viewBox="0 0 72 72">
        <path d="M12,54h30l-6,6H12V54z M72,30v42H0V30H72z M66,36H6v30h60V36z" />
      </svg>
      <ComponentTitle>TextBox</ComponentTitle>
      <ComponentDescription>A component for getting or displaying text input submitted by the user</ComponentDescription>
    </Component>
  </Column>
</Row>

## Angular Inputs Example

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/overview/source.txt)

## Angular Inputs Key Features

Each Kendo UI for Angular Inputs component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The Kendo UI for Angular team constantly invests efforts to improve the performance and add more value to the existing Inputs library as well as develop new features and controls to it.

### Delaying Input Value Changes

By default, value updates are processed immediately after the user input. However, if you need to provide for some more complex scenarios and operations, you can still implement a slight delay before the components accept the new input value. [Read more about debouncing value changes in the Inputs...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/debounce-valuechange)

### Disabled Inputs

You can choose to render the Inputs in their disabled state so that, if need be present, users will not be able to interact with them. [Read more about the Disabled MaskedTextBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/maskedtextbox/disabled-state)

### Forms Support

The Inputs provide support both for the asynchronous template-driven Angular forms and the pedominantly synchronous reactive Angular forms. This feature allows you to draw on the logic set either in the template, or in the component or typescript code. [Read more about the forms support of the MaskedTextBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/maskedtextbox/forms)

### Appearance

The color and style of the Inputs are normally picked up by the current Kendo UI theme, but each aspect of the Inputs can be customized by theme variables or configuration options. Kendo UI for Angular delivers a set of popular themes including Bootstrap and Material, all of which can be easily customized with the Progress ThemeBuilder online utility. [Read more about styling the Inputs...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/styling)

### Customization

The color-picking Inputs provide various configuration options for the user to specify their rendering and customize certain aspects of the components' appearance. [Read more about the customization options of the ColorPicker...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/colorpicker/custom)

### Adornments

You can enhance the visual and functional aspects of the text-based Inputs by using custom adornments in the form of prefixes and suffixes. Decorating the components allows you to make them more user-friendly and engaging. [Read more about the adornments of the TextBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/textbox/adornments)

### Labels

You have the ability to display labels for the Inputs by associating them with a label element, ensuring that the components follow best practices for adding input elements to your Angular application. Some of the Inputs also provide built-in properties for customizing their internal labels. [Read more about labels association of the CheckBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/checkbox/labels)

### Globalization

The Kendo UI for Angular Inputs support globalization to ensure that each Inputs component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Inputs support rendering in a right-to-left (RTL) direction. [Read more about Inputs globalization...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/globalization)

### Accessibility

The Inputs are accessible for screen readers and support WAI-ARIA attributes. [Read more about the accessibility support of the MaskedTextBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/maskedtextbox/accessibility)

### Keyboard Navigation

The Inputs support a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the MaskedTextBox...](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/maskedtextbox/keyboard-navigation)

## Licensing

The Kendo UI for Angular Inputs are part of the Kendo UI for Angular library. Kendo UI for Angular offers a 30-day trial with a full-featured version of the library—no restrictions! What’s more, you are eligible for full technical support during your trial period in case you have any questions. Sign up for a [free 30-day trial](https://www.telerik.com/download-login-v2-kendo-angular-ui) of Kendo UI for Angular.

## Support Options

For any questions about the use of Kendo UI for Angular Inputs, or any of our other components, there are [several support options available](https://www.telerik.com/support/kendo-ui-for-angular):

* Kendo UI license holders and anyone in an active trial can take advantage of the Kendo UI for Angular outstanding customer support delivered by the actual developers who built the library. To submit a support ticket, use the [Kendo UI support system](https://www.telerik.com/account/support-tickets).
* [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI  team on all kinds of general issues.
* [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) and [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap/) provide information on the features in discussion and also the planned ones for release.
* Kendo UI for Angular uses [GitHub Issues](https://github.com/telerik/kendo-angular/issues) as its bug tracker and you can submit any related reports there. Also, check out the [closed list](https://github.com/telerik/kendo-angular/issues?q=is%3Aissue+is%3Aclosed).
* Of course, the Kendo UI for Angular team is active on [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2) as well and you can find a wealth of questions and answers there.
* Need something unique that is tailor-made for your project? Progress offers its [Progress Services](https://www.progress.com/services) group that can work with you to create any customized solution that you might need.

## Learning Resources

* [Getting Started with the Kendo UI for Angular Inputs](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/installation/getting-started)
* [API Reference of the Inputs](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Kendo UI for Angular Forum](https://www.telerik.com/forums/kendo-angular-ui)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)