New to KendoReact? Learn about KendoReact Free.

OTPInput Separator

Updated on Jun 22, 2026

The OTPInput can visually group its cells and render a separator between each group. You control grouping with the groupLength prop and the separator character or icon with the separator prop.

String Separators

Pass any string to the separator prop to render it between groups. The groupLength prop accepts:

A single number — all groups have the same length.
A number[] — each element sets the length of the corresponding group. The sum of all values must equal length.

Change Theme

Theme

Loading ...

Icon Separators

You can render a Kendo SVG icon as the separator by passing an OTPSeparatorIcon object to the separator prop.