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

Appearance

  • Demo Configurator
Size
FillMode
Rounded
Space

The WebForms OTPInput offers various options that allow you to control its appearance, such as size, fill mode, and border radius.

Use the styling options showcased in this demo to modify the overall appearance of the component. You can review and copy the widget's configuration with all styling options from the source code of the demo.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="OTPInput_Appearance_DefaultVB" %>


<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="script.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadOTPInput ID="OTPInput1" runat="server" FillMode="Outline">
            <Items>
                <telerik:OTPInputItem GroupLength="3" />
                <telerik:OTPInputItem GroupLength="2" />
                <telerik:OTPInputItem GroupLength="3" />
            </Items>
        </telerik:RadOTPInput>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboBox1" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" />
                                    <telerik:RadComboBoxItem Text="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="FillMode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboBox2" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeFillMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" />
                                    <telerik:RadComboBoxItem Text="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" />
                                    <telerik:RadComboBoxItem Text="Flat" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Rounded" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboBox3" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeRounded">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" />
                                    <telerik:RadComboBoxItem Text="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" />
                                    <telerik:RadComboBoxItem Text="Full" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Title="Space" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" AutoPostBack="false" Text="Add Space" Value="" OnClientClicked="changeSpace" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance