Props

This page demonstrates usage of some of the props exposed by OTP Input.

modelValue | {string}

Must be a string; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive.

Value: 123456

<script setup lang="ts">
import { ref } from 'vue';
const otp = ref<string>('123456');
</script>

<template>
  <otp-input v-model="otp" />
</template>

label | {string}

Title/Label on the input.

OTP Input

<template>
  <otp-input model-value="" label="OTP Input" />
</template>

labelClass | {string}

Class definitions to be applied to the label.

OTP Input

<template>
  <otp-input model-value="" label="OTP Input" label-class="bold-text" />
</template>

<style>
.bold-text {
  font-weight: bold;
}
</style>

position | {left right center justify} | [default: center]

The position of the component.

<template>
  <otp-input model-value="" position="left" />
</template>

primaryColor | {string} | [default: #3880ff]

The primary color for the input boxes.

<template>
  <otp-input model-value="" primary-color="#663399" />
</template>

secondaryColor | {string} | [default: #3dc2ff]

The secondary color for the input boxes, used when a box is focused.

<template>
  <otp-input model-value="" secondary-color="#3dc2ff" />
</template>

textColor | {string} | [default: #3880ff]

The text color for the input boxes.

<template>
  <otp-input model-value="" text-color="#663399" />
</template>

textColorActive | {string} | [default: #3dc2ff]

The text color for the focused input boxe.

<template>
  <otp-input model-value="" text-color-active="#3dc2ff" />
</template>

backgroundColor | {string} | [_default: transparent]

Sets the background color for the input boxes.

<template>
  <otp-input model-value="" background-color="#8B8686" />
</template>

backgroundColorActive | {string} | [_default: transparent]

Sets the background color for the focused input box.

<template>
  <otp-input model-value="" background-color-active="#8B8686" />
</template>

fontSize | {string} | [default: 30px]

Font size in CSS units, including unit name.

<template>
  <otp-input model-value="" font-size="10px" />
</template>

inputsCount | {number} | [default: 6]

Number of input boxes to show.

<template>
  <otp-input model-value="" inputs-count="4" />
</template>

borders | {string} | b t l r [default: btlr]

Borders that should be visible.

<template>
  <div
    style="padding-top: 10px; display:flex; gap: 15px; justify-content:center;"
  >
    <otp-input model-value="" inputs-count="2" borders="bt" />
    <otp-input model-value="" inputs-count="2" borders="lr" />
    <otp-input model-value="" inputs-count="2" borders="tr" />
    <otp-input model-value="" inputs-count="2" borders="bl" />
  </div>
</template>

masked | {boolean} | {square} | {circle} | {disc}

Borders that should be visible.

Default

disc

square

circle

<template>
  <div
    style="padding-top: 10px; display:flex; gap: 15px; flex-direction: column;"
  >
    <otp-input model-value="" masked />
    <otp-input model-value="" masked="disc" />
    <otp-input model-value="" masked="square" />
    <otp-input model-value="" masked="circle" />
  </div>
</template>

fontFamily | {string} | [default: "Anton", sans-serif;]

Font Family that will be used by the component.

<template>
  <otp-input model-value="" font-family="monospace" />
</template>

borderSize | {string} | [default: 2px]

Size of the input borders in CSS units, including unit name.

<template>
  <otp-input model-value="" border-size="4px" />
</template>

borderRadius | {string} | [default: 5px]

Size of the border radius in CSS units, including unit name (will overide rounded)

<template>
  <otp-input model-value="" border-radius="10px" />
</template>

fieldWidth | {number} | [default: 56]

Width of the input boxes.

<template>
  <otp-input model-value="" field-width="40" />
</template>

fieldHeight | {number} | [default: 56]

Height of the input boxes.

<template>
  <otp-input model-value="" field-height="40" />
  <otp-input model-value="" field-width="40" field-height="40" />
</template>

disabled | {boolean} | [default: false]

Whether the component should be put in disabled state.

<template>
  <otp-input model-value="" disabled />
</template>

required | {boolean} | [default: false]

Whether the component should require completion.

<template>
  <otp-input model-value="" required />
</template>

rounded | {boolean} | [default: false]

Adds rounded borders to the component input boxes.

<template>
  <otp-input model-value="" rounded />
</template>

hasError | {boolean} | [default: false]

Indicates if the component should be put in error state.

<template>
  <otp-input model-value="" has-error />
</template>

errorMessage | {string}

Validation error message (gets displayed only if hasError is set to true).

This component has an error

<template>
  <otp-input
    has-error
    model-value=""
    error-message="This component has an error"
  />
</template>