Separator in Vue OTP Input component

14 Jun 20241 minute to read

The separator in OTP Input specifies the character or symbol used to separate each input field in the OTP Input control. This separator is displayed between each input field to visually distinguish between each inputs. You can set the separator character by using the separator property.

<template>
  <div class='wrap'>
    <ejs-otpinput id="separator_otp" separator="/"></ejs-otpinput>
  </div>
</template>

<script setup>
import { OtpInputComponent as EjsOtpinput } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

.wrap {
  width: 350px;
  margin-top: 30px;
  padding: 30px;
}
</style>
<template>
  <div class='wrap'>
    <ejs-otpinput id="separator_otp" separator="/"></ejs-otpinput>
  </div>
</template>

<script>
import { OtpInputComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
    name: "App",
    components: { 'ejs-otpinput': OtpInputComponent }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

.wrap {
  width: 350px;
  margin-top: 30px;
  padding: 30px;
}
</style>