---
title: Usage
position: 2
seo_title: Guidelines for Using the OTP Input Component
seo_description: "Get the knack of the Telerik and Kendo UI OTP Input and learn
  how to use and implement the component by following the instructions and
  recommendations in the user guidelines created by our designers.

  \ "
---
## 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.

<DosDonts>
<Do description="Use a clear, descriptive text label that explains the purpose of the OTP Input.">![A Telerik and Kendo UI OTP Input with a label.](images/components-otp-input-text-label-do.png "Use a Telerik and Kendo UI OTP Input with a label which states what user input is required.")</Do>
<Dont description="Avoid omitting the text label unless the OTP Input is part of a complex scenario and its context is already set.">![A Telerik and Kendo UI OTP Input with no label making it impossible to understand what type of information is required.](images/components-otp-input-text-label-dont.png "Do not render a Telerik and Kendo UI OTP Input without a label to avoid misunderstanding and frustration on behalf of the user.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Use separators to split lengthy codes into logical groups to help users quickly understand and enter the required digits.">![A Telerik and Kendo UI OTP Input with grouping and separator.](images/components-otp-input-grouping-with-separators-do.png "Use a Telerik and Kendo UI OTP Input with separators to divide multiple inputs into logical groups.")</Do>
<Dont description="Avoid creating an excessively long string of consecutive input fields without any grouping, as it can lead to confusion and user error.">![A Telerik and Kendo UI OTP Input without grouping and separator.](images/components-otp-input-grouping-with-separators-dont.png "Do not use a Telerik and Kendo UI OTP Input without grouping and separator when multiple fields are required.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Use a TextBox component for typical password fields.">![A Telerik and Kendo UI Form with login input fields.](images/components-otp-input-usage-do.png "Use a Telerik and Kendo UI TextBox for password fields.")</Do>
<Dont description="Avoid using the OTP Input for password entry, as this can lead to user confusion and frustration.">![A Telerik and Kendo UI OTP Input in a loging form.](images/components-otp-input-usage-dont.png "Do not use a Telerik and Kendo UI OTP Input for standard password fields.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Use the OTP Input as the primary interaction on the page, guiding users to enter their code promptly.">![A Telerik and Kendo UI OTP Input as part of Dialog with title and confirmation button.](images/components-otp-input-primary-interaction-do.png "Use a Telerik and Kendo UI OTP Input as the primary interaction on the page.")</Do>
<Dont description="Avoid placing the OTP Input within complex, multi-field forms, where the code may expire and disrupt the user flow.">![A Telerik and Kendo UI OTP Input as part of complex form.](images/components-otp-input-primary-interaction-dont.png "Do not use a Telerik and Kendo UI OTP Input in multi-field forms as filling them may cost too musch time for the user and the code to expire.")</Dont>
</DosDonts>