New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Separator

In this article, you will find information about the different ways to add a Separator between the OTPInput items. The option accepts a string and can be configured to use an SVG icon. In order for the configuration to work, there must be at least 2 OTPInputItems.

The below example demonstrates how to add a separator as a string.

ASP.NET

<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Separator="-">
    <ItemsCollection>
        <telerik:OTPInputItem GroupLength="3" />
        <telerik:OTPInputItem GroupLength="3" />
    </ItemsCollection>
</telerik:RadOTPInput>

The next example shows how to add a separator as a function using the kendo.ui.icon method.

ASP.NET

<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Separator="-">
    <ItemsCollection>
        <telerik:OTPInputItem GroupLength="3" />
        <telerik:OTPInputItem GroupLength="3" />
    </ItemsCollection>
    <ClientEvents OnLoad="onLoad" />
</telerik:RadOTPInput>

JavaScript

function onLoad(sender, args) {
    let newSeparator = () => kendo.ui.icon({ icon: "minus", type: "svg" });
    sender.set_separator(newSeparator);
}

Separator

Next Steps