Separator

In this article, you will find information about the different ways to add a separator between the OTPInput items. The option accepts either a string or a function. In order for the configuration to work, the items need to be configured as an array.

The below example demonstrates how to add a separator as a string.

EditPreviewOpen In Dojo

    <input id="otpinput" />
    <script>
        $("#otpinput").kendoOTPInput({
            items: [
                {
                    groupLength: 3
                },
                {
                    groupLength: 2
                }
            ],
            separator: "--"
        });
    </script>

The next example show how to add a separator as a function using the kendo.ui.icon method.

EditPreviewOpen In Dojo

    <input id="otpinput" />
    <script>
        $("#otpinput").kendoOTPInput({
            items: [
                {
                    groupLength: 3
                },
                {
                    groupLength: 2
                }
            ],
            separator: () => kendo.ui.icon({icon: "shape-line", type: "svg"})
        });
    </script>