Appearance

Confirmation Code Input ​

Confirmation Code Input is used to confirm an OTP code sent by messages or authenticator

Basic Confirmation Code Input ​

vue
<script>
  import { ref } from 'vue';

  const codeConfirmation = ref();
</script>

<ConfirmationCodeInput v-model="codeConfirmation" />

Setting the number of fields ​

You can change the number of digits required using the digitCount prop

vue
<script>
  import { ref } from 'vue';

  const codeConfirmation = ref();
</script>

<ConfirmationCodeInput v-model="codeConfirmation" :digitCount="4" />

Error and Success messages ​

Error and success messages can be rendered using errorText or successText

I am a success text
vue
<script>
  import { ref } from 'vue';

  const codeConfirmation = ref();
</script>

<ConfirmationCodeInput v-model="codeConfirmation" successText="I am a success text" />
I am an error text
vue
<script>
  import { ref } from 'vue';

  const codeConfirmation = ref();
</script>

<ConfirmationCodeInput v-model="codeConfirmation" errorText="I am an error text" />

Hint Text ​

Displays text below the input

Check your device for your temporary code. This code will expire in 10 minutes. Please go back and resubmit if you do not receive your code.
vue
<script>
  import { ref } from 'vue';

  const codeConfirmation = ref();
</script>

<ConfirmationCodeInput v-model="codeConfirmation" hint-text="Check your device for your temporary code. This code will expire in 10 minutes. Please go back and resubmit if you do not receive your code." />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.