npx volt-vue add InputOtp
import InputOtp from '@/volt/InputOtp.vue';
InputOtp is used with the v-model property for two-way value binding. The number of characters is defined with the length option, which is set to 4 by default.
<template>
<div class="card flex justify-center">
<InputOtp v-model="value" />
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Enable the mask option to hide the values in the input fields.
<template>
<div class="card flex justify-center">
<InputOtp v-model="value" mask />
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
When integerOnly is present, only integers can be accepted as input.
<template>
<div class="card flex justify-center">
<InputOtp v-model="value" integerOnly />
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<template>
<div class="card flex justify-center">
<InputOtp v-model="value" variant="filled" />
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
InputOtp provides small and large sizes as alternatives to the base.
<template>
<div class="card flex flex-col items-center gap-4">
<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>
Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
<template>
<div class="card flex justify-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="w-12 text-3xl border-x-0 border-y-0 text-center bg-transparent border-b-2 border-surface-300 dark:border-surface-700 focus:border-primary outline-none" />
</template>
</InputOtp>
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
A sample UI implementation with templating and additional elements.
Please enter the code sent to your phone.
<template>
<div class="card flex justify-center">
<div class="flex flex-col items-center">
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
<p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
<InputOtp v-model="value" :length="6" style="gap: 0">
<template #default="{ attrs, events, index }">
<input
type="text"
v-bind="attrs"
v-on="events"
class="w-12 h-12 text-2xl text-center border border-surface-200 :border-surface-700 focus:-outline-offset-2 focus:outline-2 focus:outline-primary border-r-0 text-surface-700 dark:text-surface-0 first:rounded-s-xl nth-5:rounded-s-xl last:rounded-e-xl nth-3:rounded-e-xl nth-3:border-r last:border-r"
/>
<div v-if="index === 3" class="px-4">
<i class="pi pi-minus" />
</div>
</template>
</InputOtp>
<div class="flex justify-between mt-8 self-stretch">
<Button label="Resend Code" variant="text" class="p-0"></Button>
<Button label="Submit Code"></Button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import InputOtp from '@/volt/InputOtp.vue';
import { ref } from 'vue';
const value = ref(null);
</script>