# Vue OTPInput Overview

The Kendo UI for Vue OTPInput enables users to enter one-time passwords during multi-factor authentication.

The following example demonstrates the OTPInput in action.

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

## Key Features

* [Controlled Mode](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/controlled)—Use `v-model` to fully control the OTPInput value from your parent component.
* [Types](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/types)—The OTPInput supports `text`, `password`, and `number` input types to cover common OTP entry scenarios.
* [Separator](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/separator)—Group cells visually with string or icon separators to improve readability of longer codes.
* [Forms Support](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/forms-support)—Integrate the OTPInput with the Kendo UI for Vue Form component for built-in validation and error messaging.
* [Placeholder](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/placeholder)—Provide a single-character placeholder to guide users on the expected input format.
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance)—Configure the size, fill mode, roundness, and spacing of the OTPInput cells.
* [Disabled State](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/disabled)—Prevent user interaction by disabling the component.
* [Read-Only State](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/readonly)—Display a value that users can read but not modify.
* [Adaptive Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/adaptive-rendering)—Use the `inputAttributes` property to configure the on-screen keyboard type displayed on touch devices.
* [Events](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/events)—React to value changes, cell focus, and blur events.
* [Keyboard Navigation](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/keyboard-navigation)—The OTPInput ships with full keyboard support including paste handling.
* [Custom Attributes](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/custom-attributes)—Apply custom HTML attributes to every input cell, such as `autocomplete="one-time-code"`.

> To learn more about the appearance, anatomy, and accessibility of the OTPInput, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/otpinput/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

## Suggested Links

* [Getting Started with Kendo UI for Vue Inputs](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/get-started)
* [API Reference of the OTPInput Component](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops)