OTP Input

Usage Guidelines

The Telerik and Kendo UI OTP Input requires you to follow some basic principles when using the component.

Text Label

Usually, the OTP Input is accompanied by a text label which clarifies its meaning and provides context to the user. When integrated in complex components, for example, in a Dialog, the OTP Input does not require a label. The label of the OTP Input can be set as part of the Telerik and Kendo UI Form component.

DoUse a clear, descriptive text label that explains the purpose of the OTP Input.

Don'tAvoid omitting the text label unless the OTP Input is part of a complex scenario and its context is already set.

Grouping with Separators

Separators help break up long one-time passwords into smaller, more manageable chunks, reducing cognitive load and making the code entry process smoother. By visually grouping digits, users can more easily track their progress and verify each section as they input their code.

DoUse separators to split lengthy codes into logical groups to help users quickly understand and enter the required digits.

Don'tAvoid creating an excessively long string of consecutive input fields without any grouping, as it can lead to confusion and user error.

Usage

The OTP Input is specifically designed for one-time-passwords. Repurposing it as a TextBox replacement for standard password entry can degrade the user experience and introduce unnecessary complexity.

DoUse a TextBox component for typical password fields.

Don'tAvoid using the OTP Input for password entry, as this can lead to user confusion and frustration.

Primary Interaction

The OTP Input is meant for entering time-sensitive codes that expire quickly, typically received via phone or email. Embedding it within a lengthy form can result in the code expiring before users have a chance to submit, leading to a frustrating experience.

DoUse the OTP Input as the primary interaction on the page, guiding users to enter their code promptly.

Don'tAvoid placing the OTP Input within complex, multi-field forms, where the code may expire and disrupt the user flow.