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:
  • svgIcon—Sets an SVG icon. For the full list of available icons, visit the list of SVG icons supported by Kendo UI for Angular.
  • fontIcon—Sets a font icon. For the full list of available icons, visit the list of font icons supported by Kendo UI for Angular.
  • iconClass—Displays an icon from a CSS class. Using the iconClass is suitable for rendering FontAwesome or other third-party font icons.
• 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,
};

ts

public fontIconSeparator: OTPSeparatorIcon = {
    type: "fontIcon",
    value: "star",
};

ts

public fontAwesomeSeparator: OTPSeparatorIcon = {
    type: "iconClass",
    value: "fa fa-arrow-right",
};

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 ...

Suggested Links

• API Reference of the OTP Input Component