# OTPInput Separator

The OTPInput can visually group its cells and render a separator between each group. You control grouping with the [`groupLength`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#grouplength) prop and the separator character or icon with the [`separator`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#separator) prop.

## String Separators

Pass any string to the [`separator`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#separator) prop to render it between groups. The [`groupLength`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#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`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/separator/source.txt)

## Icon Separators

You can render a Kendo SVG icon as the separator by passing an [`OTPSeparatorIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpseparatoricon) object to the [`separator`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#separator) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/separator-icon/source.txt)

## Suggested Links

* [API Reference of the OTPInput Props](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops)