OTP Input

OTP Input Overview

The OTP Input component offers a simple and efficient way for users to enter one-time passwords in segmented fields, commonly used during multi-factor authentication processes. It accepts only single characters per field, and once a character is entered, the focus automatically advances to the next field. This feature helps users quickly complete the verification process. Additionally, the OTP Input component supports convenient pasting and single-field editing, further enhancing the overall user experience.

Live Demo

Appearance

OTP Inputs provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI OTP Input, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI OTP Input can acquire and can be rendered in the following states:

• The OTP Input in its normal state is fully active, but the user is not interacting with it. This is the default state of the component. Input fields can contain a placeholder symbol or an already prefilled text.
• k-hover—The hover state is applied when the user hovers over a single input field but does not click it. The mouse pointer changes to indicate that you can type into the component.
• k-focus—The focus state is triggered after a single input field has been spotlighted with the mouse or the keyboard.
• k-invalid—The invalid state of an OTP Input field results from failing the validation either because of the lack of a required type of input or any input at all.
• k-invalid k-focus—The invalid focus state of an OTP Input is a result of spotlighting a single input field whose value or input type does not pass the validation requirements.
• k-disabled—The disabled state of the OTP Input indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

Anatomy

The anatomy of the OTP Input summarizes the elements of the component. Depending on its elements, the Telerik and Kendo UI OTP Inputs can be any of the following types:

• An OTP Input with no label and hint
• An OTP Input with a label in Form components
• An OTP Input with a label and a hint in Form components

The next image shows the anatomy of an OTP Input and includes the following elements:

1. Input field
2. Label (optional, used only in the Form component)
3. Hint text (optional, used only in the Form component)
4. Placeholder or input value
5. Separator (optional in grouping)
6. Group of input fields

Variants

Depending on the space between single input fields, the Telerik and Kendo UI OTP Input components can be any of the following types:

• OTP Input with space
• OTP Input without space

1. OTP Input with space between input fields (default)
2. OTP Input without space between input fields

Grouping

Depending on the elements they display in grouping, the Telerik and Kendo UI OTP Input components can be any of the following types:

• An OTP Input with space between input fields and without separator between groups
• An OTP Input with space between input fields and a separator between groups
• An OTP Input without space between input fields and separator between groups
• An OTP Input without space between input fields and a separator between groups

1. OTP Input with space between input fields and without separator between groups
2. OTP Input with space between input fields and a separator between groups
3. OTP Input without space between input fields and separator between groups
4. OTP Input without space between input fields and a separator between groups

Input Types

Depending on the input type, the Telerik and Kendo UI OTP Input components can be any of the following types:

• Number
• Text
• Password

1. Number
2. Text
3. Password

Size

The OTP Input provides the size configuration option that enables you to control how big or small the rendered OTP Input will be. OTP Inputs also provide options for size customization. To avoid inconsistencies when combining components, configure them using the same size setting. By default, the OTP Inputs are medium-sized.

size provides the following available options: 

• small—Renders a small OTP Input which is optimized for compact UI designs. The small Telerik and Kendo UI OTP Input use the same typographic style as the medium text boxes. However, to decrease the height, the small OTP Input applies a $kendo-spacing, 0.5 spacing value for its vertical padding.
• medium (default)—Renders a medium input. The medium Telerik and Kendo UI OTP Input uses the same typographic style as the small text boxes. However, the vertical height of the component is achieved by setting the $kendo-spacing, 1 spacing value for its vertical padding.
• large—Renders a large input that is suitable for layouts with a lot of space between the elements to achieve an airy UI look and feel. The large OTP Input is optimized for adaptive components and mobile UI designs and achieves the recommended touch area dimensions both by doubling the value of their vertical paddings to $kendo-spacing, 2 and by using a different typographic style with a bigger font size and line height.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium
3. Large

Fill Mode

The OTP Input provides the fillMode configuration option that enables you to visually achieve a certain atmosphere in your app. OTP Inputs also provide options for fill-mode customization. By default, the OTP Inputs are rendered in solid colors.

fillMode provides the following available options:

• solid (default)—The solid fill mode focuses on the layout and emphasizes the input field. It can be wrapped in a container with a different background color making the OTP Input stand out.
• outline—The outline fill mode focuses less on the input field. Outlined OTP Inputs do not have a background fill and can blend with the surrounding UI environment.
• flat—The flat fill mode emphasizes less the input field and more the data input. Also, the flat fill mode reduces additional visual noise and focuses on the content.
• none—Does not set a fillMode and allows you to add your own, custom value.  

1. Solid
2. Outline
3. Flat

Border Radius

The OTP Input provides the rounded option that enables you to control the border radius of the rendered input fields. The defined value for the border radius significantly affects the look-and-feel of the UI. To avoid inconsistency, it is recommended that you follow a single concept of rounding the element in your UI. The OTP Input also supports settings for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2px.
• medium(default)—Renders a border radius of 4px.
• large—Renders a border radius of 6px.
• full—Renders a fully rounded border radius that creates round shape input fields.
• none—Does not set a rounded and allows you to add your own, custom value.  

1. Small
2. Medium
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular OTP InputFind more information about the Kendo UI for Angular OTP Input in the official product documentation of the component.

Kendo UI for jQuery OTP InputFind more information about the Kendo UI for jQuery OTP Input in the official product documentation of the component.

Telerik UI for ASP.NET Core OTP InputFind more information about the Telerik UI for ASP.NET Core OTP Input component.

Telerik UI for ASP.NET MVC OTP InputFind more information about the Telerik UI for ASP.NET MVC OTP Input component.