New to Kendo UI for AngularStart a free 30-day trial

Separator

The Kendo UI for Angular OTP Input component enables you to group the input fields and visually separate them by rendering a desired symbol or icon between the groups.

Configuration

To render a separator between groups of input fields in the OTP Input component:

  1. Define the desired input groups by setting the groupLength property to a single number value or an array of numbers. If you set the groupLength to an array of numbers, you can specify a different length for each group.
  2. Set the separator property of the component to one of the following options:
    • a string value—Allows you to render text characters or specific symbols as separators.
    • OTPSeparatorIcon—Allows you to render icon separators. See the Icon Separator section for more details.

The following example demonstrates how to define a string separator for the input groups of the Kendo UI for Angular OTP Input.

Change Theme
Theme
Loading ...

Icon Separator

To define an icon separator between the input fields of the OTP Input, set the separator property to an object of type OTPSeparatorIcon. The OTPSeparatorIcon object consist of the following fields:

  • type—Used to specify the type of icon to be rendered. This field allows setting an icon of type:
  • value—Used to set the desired icon to be displayed depending on the specified type. This field accepts values of type SVGIcon or string.
ts
public chevronDoubleRightIcon: SVGIcon = chevronDoubleRightIcon;

public svgIconSeparator: OTPSeparatorIcon = {
    type: "svgIcon",
    value: chevronDoubleRightIcon,
};

The following example demonstrates how to define an icon separator for the input groups of the Kendo UI for Angular OTP Input.

Change Theme
Theme
Loading ...
In this article
ConfigurationIcon SeparatorSuggested Links
Not finding the help you need?
Contact Support