Appearance
The OTPInput exposes a set of appearance props that let you match the component to your application's visual design.
Apart from the default vision of the OTPInput, these alternative styling options enable you to configure each individual aspect of the appearance of a OTPInput.
Size
The KendoReact OTPInput enables you to configure the size of the component.
The size option supports the following values:
smallmedium(Default)large
The following example demonstrates the available size options.
Rounded
The KendoReact OTPInput allows you to define different border radius styles by using the rounded property.
The rounded option supports the following values:
smallmedium(Default)largefullnone
The following example demonstrates the available rounded options.
Fill Mode
The KendoReact OTPInput allows you to set the cell background and border style by using the fillMode property.
The fillMode option supports the following values:
solid(Default)flatoutline
The following example demonstrates the available fillMode options.
Spacing
By default, adjacent cells have a small gap between them. Set spacing to false to remove the gap and render cells flush against each other.
The following example demonstrates both spacing options.
Length
The length prop controls the total number of individual input cells. The default value is 4.
The following example demonstrates how to configure the OTPInput length.