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:
SmallMediumLargeNone
When not explicitly set, the applied theme controls the default size.
@(Html.Kendo().OTPInput()
.Name("otpinput")
.Size(ComponentSize.Large)
.Items(5)
)FillMode
The FillMode() method specifies how the color is applied to the component.
The following options are available for the FillMode configuration:
SolidOutlineFlatNone
When not explicitly set, the applied theme controls the default fill mode.
@(Html.Kendo().OTPInput()
.Name("otpinput")
.FillMode(FillMode.Outline)
.Items(5)
)Rounded
The border radius of the component can be customized through the Rounded() method.
The following values are available for the Rounded option:
SmallMediumLargeFullNone
When not explicitly set, the applied theme controls the default border radius.
@(Html.Kendo().OTPInput()
.Name("otpinput")
.Rounded(Rounded.Full)
.Items(5)
)