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

Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core OTPInput.

For a complete example, refer to the Appearance Demo of the OTPInput.

Options

The OTPInput supports the following styling options:

Size()—Configures the overall size of the component.
FillMode()—Defines how the color is applied to the OTPInput.
Rounded()—Determines the border radius of the component.

Size

To control the size of the OTPInput, configure the Size option with any of the following values:

Small
Medium
Large
None

The default option is Medium.

Razor
    @(Html.Kendo().OTPInput()
        .Name("otpinput")
        .Size(ComponentSize.Large)
        .Items(5)
    )
Razor
    <kendo-otpinput name="otpinput" 
        size="ComponentSize.Large"
        items="5">
    </kendo-otpinput>
Html
    <span class="k-input k-otp-input k-input-lg"></span>

FillMode

The FillMode() method specifies how the color is applied to the component.

The following options are available for the FillMode configuration:

Solid
Outline
Flat
Link
Clear
None

The default OTPInput fill mode is Solid.

Razor
    @(Html.Kendo().OTPInput()
        .Name("otpinput")
        .FillMode(FillMode.Outline)
        .Items(5)
    )
Razor
    <kendo-otpinput name="otpinput" 
        fill-mode="FillMode.Outline"
        items="5">
    </kendo-otpinput>
Html
    <span class="k-otp-input k-input k-input-outline"></span>

Rounded

The border radius of the component can be customized through the Rounded() method.

The following values are available for the Rounded option:

Small
Medium
Large
Full
None