shadcn-vue/apps/www/src/lib/registry/default/example/InputOtpSeparatorDemo.vue
2024-03-08 01:27:02 +03:30

25 lines
555 B
Vue

<script setup lang="ts">
import {
InputOtp,
InputOtpGroup,
InputOtpSeparator,
InputOtpSlot,
} from '@/lib/registry/default/ui/input-otp'
</script>
<template>
<InputOtp
v-slot="{ slots }"
:maxlength="6"
>
<InputOtpGroup class="gap-2">
<template v-for="(slot, index) in slots" :key="index">
<InputOtpSlot class="rounded-md border" v-bind="slot" />
<template v-if="index !== slots.length - 1">
<InputOtpSeparator />
</template>
</template>
</InputOtpGroup>
</InputOtp>
</template>