OTP Input Appearance
The Kendo UI for Angular OTP Input provides predefined appearance options such as different sizes, border radiuses, and fill modes. The component also offers options for modifying its length and defining a spacing between the input fields.
Since version 22.1.0, default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
For more information, refer to the Design System documentation.
The following example demonstrates all available appearance options of the OTP Input in action.
Length
By default, the OTP Input component displays four input fields. You have the ability to adjust the length of the OTP Input and define the total number of input fields in the component.
To customize the number of input fields in the OTP Input, use the length property that the component provides.
Spacing
By default, the input fields in the OTP Input component are rendered separate from each other. The OTP Input provides a spacing property that enables you to customize this behavior and display the input fields adjacent to each other.
To remove the default spacing between the input fields in the OTP Input, set the spacing property to false.
Size
The OTP Input allows you to set different padding on the input fields. To achieve this, utilize the size property. It accepts values of type InputSize.
The size option supports the following values:
smallmediumlarge
The following example demonstrates how to define the size of the OTP Input.
Roundness
The OTP Input enables you to apply different border radius to the component through the rounded property. It accepts values of type InputRounded.
The rounded option supports the following values:
smallmediumlargefullnone
When the
spacingof the OTP Input is disabled, theroundedoption affects the border radius only of the outer input fields.
The following example demonstrates how to define the border radius of the OTP Input.
Fill Mode
The OTP Input allows you to set different fill modes by using the fillMode property. It accepts values of type InputFillMode.
The fillMode option supports the following values:
flatsolidoutline
The following example demonstrates how to define the fill mode of the OTP Input.