KendoReact OTPInput Overview

Updated on Jun 22, 2026

The KendoReact OTPInput enables users to enter one-time passwords during multi-factor authentication.

The following example demonstrates the OTPInput in action.

Change Theme

Theme

Loading ...

Key Features

• Controlled Mode—Use the value and onChange props to take full control of the OTPInput value from your component state.
• Types—The OTPInput supports text, password, and number input types to cover common OTP entry scenarios.
• Separator—Group cells visually with string or icon separators to improve readability of longer codes.
• Forms Support—Integrate the OTPInput with the KendoReact Form component for built-in validation and error messaging.
• Placeholder—Provide a single-character placeholder to guide users on the expected input format.
• Appearance—Configure the size, fill mode, roundness, and spacing of the OTPInput cells.
• Disabled State—Prevent user interaction by disabling the component.
• Read-Only State—Display a value that users can read but not modify.
• Adaptive Rendering—Use the inputAttributes property to configure the on-screen keyboard type displayed on touch devices.
• Events—React to value changes, cell focus, and blur events.
• Keyboard Navigation—The OTPInput ships with full keyboard support including paste handling.
• 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—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Suggested Links

• Getting Started with the KendoReact Inputs
• Getting Started with KendoReact
• API Reference of the OTPInput Component