New to Kendo UI for Angular? Start 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:
- Define the desired input groups by setting the
groupLength
property to a single number value or an array of numbers. If you set thegroupLength
to an array of numbers, you can specify a different length for each group. - 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.
- a
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 theiconClass
is suitable for rendering FontAwesome or other third-party font icons.
value
—Used to set the desired icon to be displayed depending on the specifiedtype
. This field accepts values of typeSVGIcon
orstring
.
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 ...