# Vue Inputs Overview

The KendoVue Inputs are fields which allow for an input of data, based on a specific and predefined format.

The Inputs components are part of the KendoVue library which provides native Kendo UI components for the Vue ecosystem and are available under the [kendo-vue-inputs NPM package](https://www.npmjs.com/package/@progress/kendo-vue-inputs).

<Row>
    <Column count={6}>
        <Component href="/inputs/checkbox">
            <svg id="checkbox" viewBox="0 0 24 24">
                <path d="M0,0V24H24V0ZM22,22H2V2H22ZM20,7.8V5L10,15.2,6.8,12H4l6,6Z"/>
            </svg>
            <ComponentTitle>Checkbox</ComponentTitle>
            <ComponentDescription>A component for selecting one or more items from a set.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/colorgradient">
            <svg id="colorgradient" viewBox="0 0 24 24">
                <path 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"/>
            </svg>
            <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">
            <svg id="colorpalette" viewBox="0 0 24 24">
                <path 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"/>
            </svg>
            <ComponentTitle>ColorPallete</ComponentTitle>
            <ComponentDescription>A component providing color selection from a pre-defined set.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/colorpicker">
            <svg id="colorpicker" viewBox="0 0 72 72">
                <path d="M36,0C36,0,9,24,9,45c0,14.9,12.1,27,27,27s27-12.1,27-27C63,24,36,0,36,0z M36,66c-11.6,0-21-9.4-21-21 C15,27,36,8.1,36,8.1S57,27,57,45C57,56.6,47.6,66,36,66z M33,51v6c8.3,0,15-6.7,15-15h-6C42,47,38,51,33,51z"></path>
            </svg>
            <ComponentTitle>ColorPicker</ComponentTitle>
            <ComponentDescription>A component for selecting and submitting color values.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/colorpicker">
            <svg id="colorpicker" viewBox="0 0 72 72">
                <path d="M36,0C36,0,9,24,9,45c0,14.9,12.1,27,27,27s27-12.1,27-27C63,24,36,0,36,0z M36,66c-11.6,0-21-9.4-21-21 C15,27,36,8.1,36,8.1S57,27,57,45C57,56.6,47.6,66,36,66z M33,51v6c8.3,0,15-6.7,15-15h-6C42,47,38,51,33,51z"></path>
            </svg>
            <ComponentTitle>FlatColorPicker</ComponentTitle>
            <ComponentDescription>A component that provides a flat view for the ColorGradient and the ColorPalette components plus additional color selection functionality.</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>Input</ComponentTitle>
            <ComponentDescription>A component for getting or displaying text input submitted by the user.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/maskedtextbox">
            <svg id="textbox" 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">
            <svg id="otpinput" viewbox="0 0 24 24">
                <path 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"/>
            </svg>
            <ComponentTitle>OTPInput</ComponentTitle>
            <ComponentDescription>A component for entering one-time passwords during multi-factor authentication.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/radiobutton">
            <svg id="radiobutton" viewBox="0 0 24 24">
                <path 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"/>
            </svg>
            <ComponentTitle>RadioButton</ComponentTitle>
            <ComponentDescription>A component for selecting an option.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/radiogroup">
            <svg id="radiogroup" viewBox="0 0 24 24">
                <path class="cls-1" d="M18.5,9A2.5,2.5,0,1,0,21,11.5,2.5,2.5,0,0,0,18.5,9Zm0-3A5.5,5.5,0,1,0,24,11.5,5.5,5.5,0,0,0,18.5,6Zm0,9.9a4.4,4.4,0,1,1,4.4-4.4A4.4,4.4,0,0,1,18.5,15.9ZM5.5,6A5.5,5.5,0,1,0,11,11.5,5.5,5.5,0,0,0,5.5,6Zm0,9.9a4.4,4.4,0,1,1,4.4-4.4A4.4,4.4,0,0,1,5.5,15.9Z"/>
            </svg>
            <ComponentTitle>RadioGroup</ComponentTitle>
            <ComponentDescription>A component for selecting one option from a set.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/rangeslider">
            <svg id="rangeslider" viewBox="0 0 24 24">
                <path class="cls-1" d="M0,13H2V11H0Zm4,1H8V10H4Zm16-3v2h2l2-2ZM10,13h2V11H10Zm4,1h4V10H14Z"/>
            </svg>
            <ComponentTitle>RangeSlider</ComponentTitle>
            <ComponentDescription>A component for selecting range-values from a predefined range.</ComponentDescription>
        </Component>
    </Column>
        <Column count={6}>
        <Component href="/inputs/rating">
            <svg id="rating" viewbox="0 0 24 24">
                <path class="cls-1" 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"/>
            </svg>
            <ComponentTitle>Rating</ComponentTitle>
            <ComponentDescription>A component for rating.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/inputs/signature">
            <svg id="signature" viewbox="0 0 24 24">
                <path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34 c-0.39-0.39-1.02-0.39-1.41,0l-1.83,1.83l3.75,3.75L20.71,7.04z"/>
            </svg>
            <ComponentTitle>Signature</ComponentTitle>
            <ComponentDescription>A component for creating and submitting 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,60h12v12H18V60z" />
            </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">
            <svg id="textarea" viewbox="0 0 24 24">
                <path d="M0,0v2v20v1v1h22h1h1V2V0H0z M22,22H2V2h20V22z M18,18h2v2h-2V18z M6,11h2v3h2v-3V8.93V6L8,4H6L4,6v2.93V11v3h2 V11z M6,6h2v3H6V6z M18,12v-2l-1-1l1-1V6l-2-2h-4v10h4L18,12z M14,6h2v2h-2V6z M14,10h2v2h-2V10z"/>
            </svg>
            <ComponentTitle>TextArea</ComponentTitle>
            <ComponentDescription>A component for getting or displaying text input on multiple lines submitted by the user.</ComponentDescription>
        </Component>
    </Column>
</Row>

<CtaPanelOverview></CtaPanelOverview>

## Basic Usage

The following example combines several Inputs components in an interactive payment form.

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

## Installation

To initialize the Inputs, either:

* [Use the CDN service](https://www.telerik.com/kendo-vue-ui-develop/components/inputs#using-cdn), or
* [Use Webpack](https://www.telerik.com/kendo-vue-ui-develop/components/inputs#initializing-with-webpack).

### Using CDN

To use the Kendo UI for Vue Inputs with CDN, follow the below steps:

1. Reference the `inputs` and `intl` packages.

```sh
  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-inputs@latest/dist/cdn/js/kendo-vue-inputs.js"></script>
```

2. Reference one of the Kendo UI themes to style your components.

```sh
    // Load the Kendo Meridian Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-meridian@latest/dist/all.css">

    // Load the Kendo Bootstrap Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    // To load the Kendo Material Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">

    // To load the Kendo Fluent Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@latest/dist/all.css">

    // Load the Kendo Default Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">
```

3. Follow the instructions in [this article](https://www.telerik.com/kendo-vue-ui-develop/components/my-license#installing-or-updating-the-license-key) to activate your product license. You can skip this step if your application already contains a license key.

### Initializing with Webpack

1. Download and install the package:

   ```sh
      npm install --save @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-licensing @progress/kendo-svg-icons
   ```

2. Once installed, import the package module.

   ```jsx
    // ES2015 module syntax
    import { NumericTextBox, Input, MaskedTextBox, Slider, Checkbox, RadioButton, RadioGroup } from '@progress/kendo-vue-inputs';
   ```

   ```jsx
   // CommonJS format
   const { NumericTextBox, Input, MaskedTextBox, Slider, Checkbox, RadioButton, RadioGroup } = require('@progress/kendo-vue-inputs');
   ```

3. You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on [getting started](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api#5-import-the-kendo-ui-for-vue-css-styles).

4. Follow the instructions on the Kendo UI for Vue [My License page](https://www.telerik.com/kendo-vue-ui-develop/components/my-license) to activate your license. You can skip this step if your application already contains a Kendo UI license file.

## Dependencies

The Inputs package requires the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) that have to be installed by your application:

* vue 3.0.0\*
* @progress/kendo-vue-intl
* @progress/kendo-licensing
* @progress/kendo-svg-icons

## Support and Learning Resources

* [Checkbox Homepage](https://www.telerik.com/kendo-vue-ui/vue-checkbox)
* [ColorGradient Homepage](https://www.telerik.com/kendo-vue-ui/colorgradient)
* [ColorPalette Homepage](https://www.telerik.com/kendo-vue-ui/colorpalette)
* [ColorPicker Homepage](https://www.telerik.com/kendo-vue-ui/colorpicker)
* [FlatColorPicker Homepage](https://www.telerik.com/kendo-vue-ui/flatcolorpicker)
* [Input Homepage](https://www.telerik.com/kendo-vue-ui/input)
* [MaskedTextBox Homepage](https://www.telerik.com/kendo-vue-ui/maskedtextbox)
* [NumericTextBox Homepage](https://www.telerik.com/kendo-vue-ui/numerictextbox)
* [RadioButton Homepage](https://www.telerik.com/kendo-vue-ui/vue-radiobutton)
* [RadioGroup Homepage](https://www.telerik.com/kendo-vue-ui/vue-radiogroup)
* [RangeSlider Homepage](https://www.telerik.com/kendo-vue-ui/rangeslider)
* [Signature Homepage](https://www.telerik.com/kendo-vue-ui/signature)
* [Slider Homepage](https://www.telerik.com/kendo-vue-ui/slider)
* [Switch Homepage](https://www.telerik.com/kendo-vue-ui/switch)
* [TextArea Homepage](https://www.telerik.com/kendo-vue-ui/textarea)
* [Getting Started with the Kendo UI Vue Inputs](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/get-started)
* [API Reference of the Inputs Package](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [Kendo UI for Vue Forum](https://www.telerik.com/forums/kendo-ui-vue)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)